{"id":71,"date":"2026-08-27T20:00:58","date_gmt":"2026-08-27T20:00:58","guid":{"rendered":"http:\/\/ucdreams-tools.local\/code-runner\/"},"modified":"2026-08-27T20:00:58","modified_gmt":"2026-08-27T20:00:58","slug":"code-runner","status":"publish","type":"page","link":"https:\/\/ucdreams.com\/tools\/code-runner\/","title":{"rendered":"CodeRunner"},"content":{"rendered":"\n<section class=\"wp-block-group tools-hero tool-hero is-layout-constrained wp-block-group-is-layout-constrained\" style=\"padding-top:70px;padding-bottom:30px\">\n\t\n\t<p class=\"has-text-align-center section-kicker wp-block-paragraph\">Developer Tools<\/p>\n\t\n\n\t\n\t<h1 class=\"wp-block-heading has-text-align-center hero-title\">CodeRunner<\/h1>\n\t\n\n\t\n\t<p class=\"has-text-align-center hero-descr wp-block-paragraph\">A CodePen-style playground \u2014 write HTML, CSS &amp; JavaScript with syntax highlighting and see the result instantly. Console included, autosave on, export standalone .html. Everything runs on your device.<\/p>\n\t\n<\/section>\n\n\n\n<section class=\"wp-block-group tool-area codearea is-layout-constrained wp-block-group-is-layout-constrained\" style=\"padding-top:16px;padding-bottom:60px\">\n\t\n\t<div class=\"cr-app\" id=\"cr-app\">\n\t\t<div class=\"cr-toolbar\">\n\t\t\t<div class=\"cr-group\">\n\t\t\t\t<span class=\"cr-logo\">\u2039\/\u203a<\/span>\n\t\t\t\t<strong style=\"font-size:13px;color:#e8eaed\">CodeRunner<\/strong>\n\t\t\t<\/div>\n\t\t\t<div class=\"cr-group\">\n\t\t\t\t<button type=\"button\" class=\"cr-btn cr-run\" id=\"cr-run\" title=\"Run (Ctrl+Enter)\">\u25b6 Run<\/button>\n\t\t\t\t<label class=\"cr-toggle\" title=\"Auto-run as you type\"><input type=\"checkbox\" id=\"cr-autorun\" checked> <span>Auto<\/span><\/label>\n\t\t\t<\/div>\n\t\t\t<div class=\"cr-group cr-tabs\" id=\"cr-tabs\">\n\t\t\t\t<button type=\"button\" class=\"cr-tab active\" data-pane=\"html\">HTML<\/button>\n\t\t\t\t<button type=\"button\" class=\"cr-tab\" data-pane=\"css\">CSS<\/button>\n\t\t\t\t<button type=\"button\" class=\"cr-tab\" data-pane=\"js\">JS<\/button>\n\t\t\t\t<button type=\"button\" class=\"cr-tab\" data-pane=\"console\">Console <span class=\"cr-badge\" id=\"cr-con-badge\" hidden>0<\/span><\/button>\n\t\t\t<\/div>\n\t\t\t<span class=\"cr-flex\"><\/span>\n\t\t\t<div class=\"cr-group\">\n\t\t\t\t<select id=\"cr-layout\" class=\"cr-select\" title=\"Layout\">\n\t\t\t\t\t<option value=\"split\" selected>\u25eb Split<\/option>\n\t\t\t\t\t<option value=\"code\">\u25ae Code only<\/option>\n\t\t\t\t\t<option value=\"preview\">\u25af Preview only<\/option>\n\t\t\t\t<\/select>\n\t\t\t\t<select id=\"cr-examples\" class=\"cr-select\" title=\"Load example\">\n\t\t\t\t\t<option value=\"\">Examples\u2026<\/option>\n\t\t\t\t\t<option value=\"starter\">Starter \u2014 button demo<\/option>\n\t\t\t\t\t<option value=\"canvas\">Canvas animation<\/option>\n\t\t\t\t\t<option value=\"console\">Console demo<\/option>\n\t\t\t\t<\/select>\n\t\t\t\t<button type=\"button\" class=\"cr-btn\" id=\"cr-save\" title=\"Download standalone .html (Ctrl+S)\">\u2b07 .html<\/button>\n\t\t\t\t<button type=\"button\" class=\"cr-btn\" id=\"cr-open\" title=\"Open .html file\">\ud83d\udcc2<\/button>\n\t\t\t\t<input type=\"file\" id=\"cr-open-input\" accept=\".html,.htm,.txt\" hidden>\n\t\t\t\t<button type=\"button\" class=\"cr-btn\" id=\"cr-reset\" title=\"Reset to starter\">\u21ba<\/button>\n\t\t\t<\/div>\n\t\t<\/div>\n\n\t\t<div class=\"cr-main\" id=\"cr-main\">\n\t\t\t<div class=\"cr-editors\" id=\"cr-editors\">\n\t\t\t\t<div class=\"cr-pane\" data-pane=\"html\"><div class=\"cr-editor\" id=\"cr-ed-html\"><\/div><\/div>\n\t\t\t\t<div class=\"cr-pane\" data-pane=\"css\" hidden><div class=\"cr-editor\" id=\"cr-ed-css\"><\/div><\/div>\n\t\t\t\t<div class=\"cr-pane\" data-pane=\"js\" hidden><div class=\"cr-editor\" id=\"cr-ed-js\"><\/div><\/div>\n\t\t\t\t<div class=\"cr-pane\" data-pane=\"console\" hidden>\n\t\t\t\t\t<div class=\"cr-con-head\">\n\t\t\t\t\t\t<span>Console output<\/span>\n\t\t\t\t\t\t<button type=\"button\" class=\"cr-btn\" id=\"cr-con-clear\">Clear<\/button>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t<div class=\"cr-console\" id=\"cr-con\"><\/div>\n\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t\t<div class=\"cr-preview-col\" id=\"cr-preview-col\">\n\t\t\t\t<div class=\"cr-prev-head\">\n\t\t\t\t\t<span>Result<\/span>\n\t\t\t\t\t<iframe id=\"cr-frame\" sandbox=\"allow-scripts allow-modals allow-popups allow-forms\" title=\"Preview\"><\/iframe>\n\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t<\/div>\n\t<\/div>\n\t\n<\/section>\n\n\n\n<section class=\"wp-block-group tools-area related-area is-layout-constrained wp-block-group-is-layout-constrained\" style=\"padding-top:20px;padding-bottom:80px\">\n\t\n\t<p class=\"section-kicker wp-block-paragraph\">Developer Tools<\/p>\n\t\n\n\t\n\t<h2 class=\"wp-block-heading section-heading\">More Developer Tools<\/h2>\n\t\n\n\t\n\t<div class=\"wp-block-group tools-grid is-layout-flow wp-block-group-is-layout-flow\">\n\t\t\n\t\t<div class=\"wp-block-group tool-card is-layout-flow wp-block-group-is-layout-flow\">\n\t\t\t\n\t\t\t<div class=\"icon-box\"><svg viewBox=\"0 0 24 24\"><path d=\"M16 18l6-6-6-6\"><\/path><path d=\"M8 6l-6 6 6 6\"><\/path><\/svg><\/div>\n\t\t\t\n\t\t\t\n\t\t\t<h4 class=\"wp-block-heading tool-title\"><a href=\"\/code-runner\/\">CodeRunner<\/a><\/h4>\n\t\t\t\n\t\t\t\n\t\t\t<p class=\"tool-tag wp-block-paragraph\">Dev<\/p>\n\t\t\t\n\t\t\t\n\t\t\t<p class=\"tool-descr wp-block-paragraph\">CodePen-style HTML\/CSS\/JS playground with live preview and console.<\/p>\n\t\t\t\n\t\t<\/div>\n\t\t\n\n\t\t\n\t\t<div class=\"wp-block-group tool-card is-layout-flow wp-block-group-is-layout-flow\">\n\t\t\t\n\t\t\t<div class=\"icon-box\"><svg viewBox=\"0 0 24 24\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"><\/rect><path d=\"M3 9h18\"><\/path><circle cx=\"8\" cy=\"14\" r=\"2\"><\/circle><path d=\"M14 16l3-3 4 4\"><\/path><\/svg><\/div>\n\t\t\t\n\t\t\t\n\t\t\t<h4 class=\"wp-block-heading tool-title\"><a href=\"\/artboard\/\">Artboard<\/a><\/h4>\n\t\t\t\n\t\t\t\n\t\t\t<p class=\"tool-tag wp-block-paragraph\">Design<\/p>\n\t\t\t\n\t\t\t\n\t\t\t<p class=\"tool-descr wp-block-paragraph\">Figma-style design editor \u2014 frames, shapes, layers, export.<\/p>\n\t\t\t\n\t\t<\/div>\n\t\t\n\n\t\t\n\t\t<div class=\"wp-block-group tool-card is-layout-flow wp-block-group-is-layout-flow\">\n\t\t\t\n\t\t\t<div class=\"icon-box\"><svg viewBox=\"0 0 24 24\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"><\/rect><path d=\"M8 12h8\"><\/path><path d=\"M12 8v8\"><\/path><\/svg><\/div>\n\t\t\t\n\t\t\t\n\t\t\t<h4 class=\"wp-block-heading tool-title\"><a href=\"\/pdf-editor\/\">PDF Editor<\/a><\/h4>\n\t\t\t\n\t\t\t\n\t\t\t<p class=\"tool-tag wp-block-paragraph\">PDF<\/p>\n\t\t\t\n\t\t\t\n\t\t\t<p class=\"tool-descr wp-block-paragraph\">Edit text, images and pages right inside your PDF.<\/p>\n\t\t\t\n\t\t<\/div>\n\t\t\n\t<\/div>\n\t\n<\/section>\n","protected":false},"excerpt":{"rendered":"<p>Developer Tools CodeRunner A CodePen-style playground \u2014 write HTML, CSS &amp; JavaScript with syntax highlighting and see the result instantly. Console included, autosave on, export standalone .html. Everything runs on your device. \u2039\/\u203a CodeRunner \u25b6 Run Auto HTML CSS JS Console 0 \u25eb Split\u25ae Code only\u25af Preview only Examples\u2026Starter \u2014 button demoCanvas animationConsole demo \u2b07 [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-71","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ucdreams.com\/tools\/wp-json\/wp\/v2\/pages\/71","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ucdreams.com\/tools\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ucdreams.com\/tools\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ucdreams.com\/tools\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/ucdreams.com\/tools\/wp-json\/wp\/v2\/comments?post=71"}],"version-history":[{"count":0,"href":"https:\/\/ucdreams.com\/tools\/wp-json\/wp\/v2\/pages\/71\/revisions"}],"wp:attachment":[{"href":"https:\/\/ucdreams.com\/tools\/wp-json\/wp\/v2\/media?parent=71"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}