Mobile-friendly Online Code Editor/Playground – WebDen

Category: Javascript , Recommended | September 2, 2021
Author:chrisdiana
Views Total:961 views
Official Page:Go to website
Last Update:September 2, 2021
License:MIT

Preview:

Mobile-friendly Online Code Editor/Playground – WebDen

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>

You Might Be Interested In:


Leave a Reply