Author: | chrisdiana |
---|---|
Views Total: | 856 views |
Official Page: | Go to website |
Last Update: | September 2, 2021 |
License: | MIT |
Preview:

Description:
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>