LiveCode

A real code editor, in a textarea.

livecode adds syntax highlighting, autocomplete, snippets, diagnostics, and live HTML preview to a plain <textarea>. View on GitHub →

<div style="font-family:system-ui,sans-serif;max-width:420px;margin:24px auto;
            border:1px solid #e5e7eb;border-radius:14px;overflow:hidden;">
  <div style="background:#534AB7;color:#fff;padding:20px 24px;">
    <h1 style="margin:0;font-size:22px;">livecode</h1>
    <p style="margin:6px 0 0;opacity:.85;font-size:14px;">Edit the HTML and the preview updates live.</p>
  </div>
  <div style="padding:20px 24px;color:#334155;">
    <p style="margin:0 0 12px;">Try <strong>Split</strong> to see code and preview together.</p>
    <a href="#" style="display:inline-block;background:#534AB7;color:#fff;
       text-decoration:none;padding:9px 16px;border-radius:8px;font-size:14px;">A button</a>
  </div>
</div>

Type to highlight. Press Ctrl/⌘ + Space for completions. HTML exposes Code, Preview, and Split. SQL and JSON stay code-only. HEEx demonstrates Lantern's server-rendered read-only snippets.