Press "Enter" to skip to content

📱 Open-Source Mobile Friendly Online Code Editor Playground | WebDen

WebDen is an open-source online code editor/playground that allows you to edit and run HTML/JS/CSS code on the client-side.

WebDen.dev is an open-source mobile and tablet alternative to JSFiddle and JSBin. It’s a fully client-side app, so you can install it as a Progressive Web Application (PWA) on your device for offline use.

Features:

  • HTML, CSS, and JS editors
  • JavaScript console emulation
  • Preview panel
  • Designed primarily for mobile and tablet use
  • Import and export projects
  • Save the code as HTML
  • Light and dark themes
  • Keyboard shortcuts
  • Offline support

Why Web den?

The online editor’s landscape is not currently optimized for mobile or tablet. iOS apps have been improved in this space but were limited when this project was originally started.

How to Use Libraries or Frameworks

Add any scripts to the HTML tab as you would an HTML file.

How to make use of it:

1. Load the required 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>

Mobile-friendly Online Code Editor/Playground, webden Plugin/Github


See Demo And Download

Official Website(chrisdiana): Click Here

This superior jQuery/javascript plugin is developed by chrisdiana. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *