WebDen is an open-source online code editor/playground that allows you to edit and run HTML/JS/CSS codes on the client side.
More Features:
- Import & Export as JSON.
- Responsive and mobile-friendly.
- Syntax highlighting.
- Auto-adds closing tags.
- Autocomplete.
- Save the current code on the client-side.
- Line numbers.
- Dark & Light themes.
- Can be used as a PWA on your device.
- And much more.
How to use it:
1. Load the necessary CSS and HTML files.
<link rel="stylesheet" href="js/lib/framework7.bundle.min.css"> <link rel="stylesheet" type="text/css" href="js/lib/font-awesome.all.min.css"> <link rel="stylesheet" href="css/style.css"> <script type="text/javascript" src="js/version.js"></script> <script type="text/javascript" src="js/lib/ace/ace.js"></script> <script type="text/javascript" src="js/lib/ace/ext-language_tools.js"></script> <script type="text/javascript" src="js/lib/ace/ext-keybinding_menu.js"></script> <script type="text/javascript" src="js/lib/framework7.bundle.min.js"></script> <script type="text/javascript" src="js/lib/renderjson.js"></script> <script type="module" src="js/main.js"></script> <script src="js/sw-init.js"></script>
2. The HTML structure.
<body class="theme-dark">
<!-- Loader -->
<div id="loader-container">
<div class="loader">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
<div id="app">
<div class="page">
<!-- Tab Links -->
<div class="toolbar tabbar toolbar-top">
<div class="toolbar-inner">
<a href="#html" class="tab-link tab-link-active">
<i class="fab fa-html5 tab-icon icon-html"></i>
</a>
<a href="#css" class="tab-link">
<i class="fab fa-css3-alt tab-icon icon-css"></i>
</a>
<a href="#javascript" class="tab-link">
<i class="fab fa-js tab-icon icon-js"></i>
</a>
<a href="#console" class="tab-link">
<i class="fas fa-terminal tab-icon icon-console"></i>
</a>
<a href="#result" class="tab-link">
<i class="fas fa-tablet-alt tab-icon icon-result"></i>
</a>
<a href="#" data-panel="right" class="tab-link panel-open">
<i class="fas fa-bars tab-icon menu"></i>
</a>
</div>
</div>
<!-- Tab Content -->
<div class="tabs">
<div id="html" class="tab tab-view tab-active" contenteditable="true"></div>
<div id="css" class="tab tab-view" contenteditable="true"></div>
<div id="javascript" class="tab tab-view" contenteditable="true"></div>
<div id="console" class="tab tab-view">
<div id="console-container">
<pre id="console-content"></pre>
</div>
</div>
<div id="result" class="tab tab-view">
<iframe id="result-iframe" frameborder="0"></iframe>
</div>
</div>
<!-- Side Panel -->
<div class="panel panel-right panel-cover">
<div class="page">
<div class="page-content">
<div class="block">
<img id="brand" src="./img/brand.png"/>
</div>
<!-- Current Project -->
<div class="list no-hairlines-md">
<ul>
<li class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Name</div>
<div class="item-input-wrap">
<input
id="project-name"
type="text"
oninput="app.updateProject('name', event)" />
<span class="input-clear-button"></span>
</div>
</div>
</li>
<li class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Description</div>
<div class="item-input-wrap">
<textarea
class="resizable"
id="project-description"
oninput="app.updateProject('description', event)">
</textarea>
</div>
</div>
</li>
</ul>
</div>
<!-- Project Menu -->
<div class="list">
<ul>
<li>
<a href="#" onclick="app.ui.newProjectConfirm()" class="item-link item-content">
<div class="item-media"><i class="fas fa-plus-square"></i></div>
<div class="item-inner">
<div class="item-title">New</div>
</div>
</a>
</li>
<li>
<a href="#" onclick="app.saveCurrentProject()" class="item-link item-content">
<div class="item-media"><i class="fas fa-save"></i></div>
<div class="item-inner">
<div class="item-title">Save</div>
</div>
</a>
</li>
<li>
<a href="#" onclick="app.ui.saveAsProjectPrompt()" class="item-link item-content">
<div class="item-media"><i class="fas fa-share"></i></div>
<div class="item-inner">
<div class="item-title">Save As</div>
</div>
</a>
</li>
<li>
<a href="#" onclick="app.ui.openProjectPopup()" class="item-link item-content">
<div class="item-media"><i class="fas fa-folder-open"></i></div>
<div class="item-inner">
<div class="item-title">Open</div>
</div>
</a>
</li>
</ul>
</div>
<!-- Copy / Paste -->
<div class="list accordion-list">
<ul>
<li>
<a href="#" onclick="app.copy()" class="item-link item-content">
<div class="item-media"><i class="fas fa-copy"></i></div>
<div class="item-inner">
<div class="item-title">Copy</div>
</div>
</a>
</li>
<li class="accordion-item">
<a href="#" class="item-content item-link">
<div class="item-media"><i class="fas fa-paste"></i></div>
<div class="item-inner">
<div class="item-title">Paste</div>
</div>
</a>
<div class="accordion-item-content">
<div class="list no-hairlines-md">
<ul>
<li class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Paste Content Here</div>
<div class="item-input-wrap">
<textarea
id="settings-paste"
oninput="app.paste(event)">
</textarea>
</div>
</div>
</li>
</ul>
</div>
</div>
</li>
<!-- TODO: add cdn
<li class="accordion-item"><a href="#" class="item-content item-link">
<div class="item-media"><i class="fas fa-link"></i></div>
<div class="item-inner">
<div class="item-title">CDN</div>
</div></a>
<div class="accordion-item-content">
<div class="list no-hairlines-md">
<ul>
<li class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Paste CDN URLs Here</div>
<div class="item-input-wrap">
<textarea
id="settings-cdn-js"
oninput="app.addCdn(event, 'js')">
</textarea>
</div>
</div>
</li>
</ul>
</div>
</div>
</li>
-->
<!-- TODO: add console history
<li>
<a href="#" onclick="app.ui.clearConsolePrompt()" class="item-link item-content">
<div class="item-media"><i class="fas fa-trash"></i></div>
<div class="item-inner"><div class="item-title">Clear Console</div></div>
</a>
</li>
-->
</ul>
</div>
<!-- Settings -->
<div class="list accordion-list">
<ul>
<li class="accordion-item">
<a href="#" class="item-content item-link">
<div class="item-media"><i class="fas fa-cog"></i></div>
<div class="item-inner">
<div class="item-title">Settings</div>
</div>
</a>
<div class="accordion-item-content" id="settings">
<div class="list no-hairlines-md">
<ul>
<li class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Theme</div>
<div class="item-input-wrap input-dropdown-wrap">
<select id="settings-theme" onchange="app.updateSettings()"></select>
</div>
</div>
</li>
<li class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Font Size</div>
<div class="item-input-wrap">
<input type="number" value="15" id="settings-fontsize" onchange="app.updateSettings()">
</div>
</div>
</li>
<li class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Keybinding</div>
<div class="item-input-wrap input-dropdown-wrap">
<select id="settings-keyboard" onchange="app.updateSettings()"></select>
</div>
</div>
</li>
<li class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Tab Size</div>
<div class="item-input-wrap">
<select id="settings-tabsize" onchange="app.updateSettings()"></select>
</div>
</div>
</li>
<li class="item-content">
<div class="item-inner">
<div class="item-title settings-toggle">Gutter</div>
<div class="item-after">
<label class="toggle">
<input id="settings-gutter" type="checkbox" onchange="app.updateSettings()">
<span class="toggle-icon"></span>
</label>
</div>
</div>
</li>
<li class="item-content">
<div class="item-inner">
<div class="item-title settings-toggle">Line Numbers</div>
<div class="item-after">
<label class="toggle">
<input id="settings-linenumbers" type="checkbox" onchange="app.updateSettings()">
<span class="toggle-icon"></span>
</label>
</div>
</div>
</li>
<li class="item-content">
<div class="item-inner">
<div class="item-title settings-toggle">Autocomplete</div>
<div class="item-after">
<label class="toggle">
<input id="settings-autocomplete" type="checkbox" onchange="app.updateSettings()" checked>
<span class="toggle-icon"></span>
</label>
</div>
</div>
</li>
<li class="item-content">
<div class="item-inner">
<div class="item-title settings-toggle">Ruler</div>
<div class="item-after">
<label class="toggle">
<input id="settings-printmargin" type="checkbox" onchange="app.updateSettings()" checked>
<span class="toggle-icon"></span>
</label>
</div>
</div>
</li>
</ul>
</div>
</div>
</li>
<li>
<a href="#" onclick="app.ui.openHelpPopup()" class="item-link item-content">
<div class="item-media"><i class="fas fa-question-circle"></i></div>
<div class="item-inner">
<div class="item-title">Help</div>
</div>
</a>
</li>
</ul>
</div>
<!-- Import/Export Menu -->
<div class="list">
<ul>
<li>
<input id="file-import" type="file" style="visibility:hidden;display:none;" onchange="app.importProject(event)" accept="application/json" />
<a href="#" onclick="document.getElementById('file-import').click()" class="item-link item-content">
<div class="item-media"><i class="fas fa-upload"></i></div>
<div class="item-inner">
<div class="item-title">Import</div>
</div>
</a>
</li>
<li>
<a href="#" onclick="app.ui.exportCurrentProjectPrompt()" class="item-link item-content">
<div class="item-media"><i class="fas fa-share"></i></div>
<div class="item-inner">
<div class="item-title">Export</div>
</div>
</a>
</li>
<li>
<a href="#" onclick="app.ui.exportCodePrompt()" class="item-link item-content">
<div class="item-media"><i class="fas fa-code"></i></div>
<div class="item-inner">
<div class="item-title">Download Code</div>
</div>
</a>
</li>
</ul>
</div>
<div class="github">
View on <a class="link external" href="https://github.com/chrisdiana/webden" target="_blank">Github</a>
</div>
<div class="version"></div>
</div>
</div>
</div>
</div>
</div>
</body>See Also:
Online HTML Editor With Instant Preview
Minimal Clean Code Editor – iblize
Simple Extensible Code Editor – Copenhagen
Cross-browser Code Editor For Browser – codejar
Tiny HTML/CSS/JavaScript Code Editor – OnCode
Simple Markdown Editor with Real-Time Preview and Customizable Toolbar
Build a Serverless Text Editor with URL Storage – textarea.my
Minimal WYSIWYG Editor In Pure JavaScript – Suneditor