Back to Snippets

Modern IDE Code Editor Interface JS

A dark editor panel with a sidebar file list, a tab bar and a code area. Clicking either the file in the sidebar or its tab shows that file and highlights both at once.

The highlighting is markup rather than a parser. Every line is a div and every token is a span carrying a class for keyword, string, function or variable. That renders instantly with no library, and it is the right call for a fixed sample you control.

Because the colors are tagged by hand, this is a presentation piece rather than a working editor. Use it to show code on a landing page or in documentation. If the code has to change at runtime, reach for a real highlighter, since tagging every token yourself does not scale past a short sample.

202

#javascript

#css

#editor

#ide

#code

#syntax highlighting

#file tree

#dashboard

#ui

Run /HTML *CSS ()JS Output Console0 Live Updates Focus

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  background: #f1f5f9;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
  padding: 20px;
}

.ide-container {
  display: flex;
  width: 100%;
  max-width: 900px;
  height: 500px;
  background: #1e1e1e;
  border-radius: 12px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
  overflow: hidden;
  border: 1px solid #333333;
}

.ide-sidebar {
  width: 220px;
  background: #181818;
  border-right: 1px solid #2d2d2d;
  padding: 16px 0;
}

.sidebar-title {
  color: #858585;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0 20px;
  margin-bottom: 12px;
  letter-spacing: 1px;
}

.file-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 20px;
  color: #cccccc;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.file-item:hover {
  background: #2a2d2e;
  color: #ffffff;
}

.file-item.active {
  background: #37373d;
  color: #ffffff;
}

.ide-main {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  background: #1e1e1e;
}

.ide-tabs {
  display: flex;
  background: #252526;
  height: 40px;
}

.tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 20px;
  background: #2d2d2d;
  color: #969696;
  font-size: 0.9rem;
  cursor: pointer;
  border-right: 1px solid #1e1e1e;
}

.tab.active {
  background: #1e1e1e;
  color: #ffffff;
  border-top: 2px solid #007acc;
}

.ide-editor {
  flex-grow: 1;
  padding: 20px 0;
  overflow-y: auto;
  font-family: "Courier New", Courier, monospace;
  font-size: 0.95rem;
  line-height: 1.6;
}

.code-view {
  display: none;
}

.code-view.active-code {
  display: block;
}

.code-line {
  display: flex;
  padding: 0 20px;
}

.code-line:hover {
  background: #282828;
}

.line-num {
  color: #858585;
  width: 30px;
  user-select: none;
  text-align: right;
  margin-right: 20px;
}

/* Beautiful VS Code Style Syntax Colors */
.kw { color: #569cd6; }
.var { color: #4fc1ff; }
.op { color: #d4d4d4; }
.func { color: #dcdcaa; }
.obj { color: #4ec9b0; }
.str { color: #ce9178; }

<div class="ide-container">
  
  <div class="ide-sidebar">
    <div class="sidebar-title">EXPLORER</div>
    
    <div class="file-item active" id="file-1">
      <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="#eab308" stroke-width="2"><path d="M12 2H2v20h20V8l-6-6z"></path><path d="M14 2v6h6"></path></svg>
      <span>script.js</span>
    </div>
    
    <div class="file-item" id="file-2">
      <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="#3b82f6" stroke-width="2"><path d="M12 2H2v20h20V8l-6-6z"></path><path d="M14 2v6h6"></path></svg>
      <span>style.css</span>
    </div>
  </div>
  
  <div class="ide-main">
    <div class="ide-tabs">
      <div class="tab active" id="tab-1">
        <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="#eab308" stroke-width="2"><path d="M12 2H2v20h20V8l-6-6z"></path></svg>
        script.js
      </div>
      <div class="tab" id="tab-2">
        <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="#3b82f6" stroke-width="2"><path d="M12 2H2v20h20V8l-6-6z"></path></svg>
        style.css
      </div>
    </div>
    
    <div class="ide-editor">
      
      <div class="code-view active-code" id="code-1">
        <div class="code-line"><span class="line-num">1</span><span class="kw">const</span> <span class="var">initApp</span> <span class="op">=</span> <span class="kw">function</span>() {</div>
        <div class="code-line"><span class="line-num">2</span>  <span class="kw">const</span> <span class="var">target</span> <span class="op">=</span> <span class="obj">document</span>.<span class="func">getElementById</span>(<span class="str">"app"</span>);</div>
        <div class="code-line"><span class="line-num">3</span>  <span class="var">target</span>.<span class="obj">classList</span>.<span class="func">add</span>(<span class="str">"running"</span>);</div>
        <div class="code-line"><span class="line-num">4</span>  </div>
        <div class="code-line"><span class="line-num">5</span>  <span class="obj">console</span>.<span class="func">log</span>(<span class="str">"System initialized flawlessly."</span>);</div>
        <div class="code-line"><span class="line-num">6</span>};</div>
        <div class="code-line"><span class="line-num">7</span></div>
        <div class="code-line"><span class="line-num">8</span><span class="func">initApp</span>();</div>
      </div>
      
      
      <div class="code-view" id="code-2">
        <div class="code-line"><span class="line-num">1</span><span class="var">.running</span> {</div>
        <div class="code-line"><span class="line-num">2</span>  <span class="kw">display</span>: <span class="str">flex</span>;</div>
        <div class="code-line"><span class="line-num">3</span>  <span class="kw">justify-content</span>: <span class="str">center</span>;</div>
        <div class="code-line"><span class="line-num">4</span>  <span class="kw">align-items</span>: <span class="str">center</span>;</div>
        <div class="code-line"><span class="line-num">5</span>  <span class="kw">background-color</span>: <span class="str">#0f172a</span>;</div>
        <div class="code-line"><span class="line-num">6</span>  <span class="kw">animation</span>: <span class="str">fade-in 0.5s ease</span>;</div>
        <div class="code-line"><span class="line-num">7</span>}</div>
      </div>
    </div>
  </div>
  
</div>

Modern IDE Code Editor Interface JS

Share Code Snippet