Skip to main content

Waveform Editor user guide

Waveform Editor draws digital timing waveforms in the browser and handles preview and export in one place. It uses the same JSON format as WaveDrom.

👉 Open the tool: Open Waveform Editor

What you can do​

  • Draw clocks, resets, buses and grouped signals
  • Start from protocol presets (SPI, I2C, UART, APB, AXI, …)
  • Live preview (zoom, background, fullscreen)
  • SVG / PNG download, SVG to clipboard, embed snippet copy
  • Save / load JSON files, share links with JSON in the URL
  • (When signed in) Supabase cloud slots and auto-save

Useful for docs, reviews, courses, and spec discussions.

Layout​

AreaRole
JSON editorWaveDrom JSON; preview updates as you type
PreviewRendered waves; white/dark/transparent background, zoom, Fit
Presets / protocolsBasic samples, groups/edges, DDR, SPI·I2C·UART·APB·AXI…
ToolbarLoad/save/share, cloud (when logged in)

The editor supports line numbers, JSON highlight, light/dark, font size, and visible line count.

Quick start​

  1. Open Waveform Editor.
  2. Edit JSON on the left — Preview on the right updates immediately.
  3. Use top buttons for basic samples, SPI / I2C, etc.
  4. JSON valid badge green = parse OK; red = fix syntax.
  5. Export SVG / PNG, or share the same JSON via URL.

Local · browser storage​

  • Content auto-saves to local storage by default.
  • Load / Save moves .json files.

Cloud (optional)​

  • After sign-in, name a snapshot and store it in slots; auto-save runs on a short interval.
  • Ctrl+S (Mac ⌘S) tries a manual cloud save.

My presets​

  • Save named JSON presets and reload them later (count limits apply).

JSON shape (WaveDrom sketch)​

{
  "signal": [
    { "name": "clk",  "wave": "p......" },
    { "name": "data", "wave": "x.345x", "data": ["A", "B", "C"] }
  ],
  "head": { "text": "Title" },
  "config": { "hscale": 1 }
}
  • wave: p (clock), 0/1/x/z, . (gap), multi-bit + data array — follow WaveDrom rules.
  • head / foot: text above / below the diagram.
  • config.hscale: horizontal scale.

See the WaveDrom tutorial for full syntax.

Shortcuts (selection)​

ShortcutAction
Ctrl+] / Ctrl+[Editor font larger / smaller
Ctrl+SCloud save (when logged in)
F11Toggle preview fullscreen
EscExit fullscreen / close shortcut panel

Open Shortcuts in the editor toolbar for the full list.

Tips​

  • Long buses: pair wave with a data array for readability.
  • Copy a protocol preset, then rename signals and tweak timing.
  • When the preview scrolls horizontally, use the bottom slider to align with the editor.

Limits​

  • No synthesis or simulation — diagrams only.
  • Only JSON that WaveDrom accepts will render; some advanced skins/plugins may differ from the desktop app.
  • Cloud features need Supabase configuration and sign-in.