← Назад к Apps

HTML/CSS/Javascript Редактор

Мини-редактор кода прямо в браузере. Тестируй свой код на HTML, CSS и JavaScript в реальном времени. Отличный инструмент для быстрого тестирования идей, экспериментов и демонстрации сниппетов.

▶ Запустить

👁 16

let root = container;

(function(container){

  // ===== СТИЛИ КОНТЕЙНЕРА =====
  container.style.height = "580px";
  container.style.display = "flex";
  container.style.flexDirection = "column";
  container.style.background = "#050505";
  container.style.border = "1px solid #00ff9c";
  container.style.borderRadius = "8px";
  container.style.overflow = "hidden";

  // ===== HTML =====
  container.innerHTML = `
    <div style="display:flex; height:100%; flex-direction:column;">
      
      <!-- Tabs -->
      <div style="display:flex; background:#111; border-bottom:1px solid #00ff9c;">
        <button data-tab="html" class="tab-btn" style="flex:1; padding:10px; color:#00ff9c; background:transparent; border:none;">HTML</button>
        <button data-tab="css" class="tab-btn" style="flex:1; padding:10px; color:#00ff9c; background:transparent; border:none;">CSS</button>
        <button data-tab="js" class="tab-btn" style="flex:1; padding:10px; color:#00ff9c; background:transparent; border:none;">JS</button>
      </div>

      <!-- Editors -->
      <div style="flex:1; display:flex;">
        <textarea id="htmlEditor" style="flex:1; background:#0a0a0a; color:#fff; padding:10px;">&lt;h1&gt;Привет&lt;/h1&gt;</textarea>
        <textarea id="cssEditor" style="flex:1; background:#0a0a0a; color:#0f0; padding:10px; display:none;">body{color:#00ff9c}</textarea>
        <textarea id="jsEditor" style="flex:1; background:#0a0a0a; color:#ffcc00; padding:10px; display:none;">console.log('Hi')</textarea>
      </div>

      <!-- Preview -->
      <iframe id="preview" style="height:45%; border:none;"></iframe>
    </div>
  `;

  // ===== ЭЛЕМЕНТЫ =====
  const htmlEditor = container.querySelector("#htmlEditor");
  const cssEditor = container.querySelector("#cssEditor");
  const jsEditor = container.querySelector("#jsEditor");
  const preview = container.querySelector("#preview");
  const tabs = container.querySelectorAll(".tab-btn");

  // ===== ФУНКЦИИ =====
  function switchTab(tab){
    htmlEditor.style.display = tab === "html" ? "block" : "none";
    cssEditor.style.display = tab === "css" ? "block" : "none";
    jsEditor.style.display = tab === "js" ? "block" : "none";
  }

  function update(){
    preview.srcdoc = `
      <style>${cssEditor.value}</style>
      ${htmlEditor.value}
      <script>${jsEditor.value}<\/script>
    `;
  }

  // ===== СОБЫТИЯ =====
  tabs.forEach(btn=>{
    btn.onclick = ()=> switchTab(btn.dataset.tab);
  });

  htmlEditor.oninput = update;
  cssEditor.oninput = update;
  jsEditor.oninput = update;

  // ===== INIT =====
  switchTab("html");
  update();

})(container);