Skip to content
Timeline DSL

Playground

The Playground is a tool that lets you edit .tdsl files in your browser and see syntax validation and SVG previews in real time. No installation required — it's ideal for learning Timeline DSL syntax or quickly validating snippets.

Open Playground

Key features

Section titled “Key features”

Real-time validation

Section titled “Real-time validation”

As you type .tdsl in the editor, syntax checking runs automatically. Errors and warnings are displayed in the diagnostics panel at the bottom of the screen, with line numbers and detailed messages.

SVG preview

Section titled “SVG preview”

When validation passes, an SVG rendering of the timeline is shown in the right panel. The preview updates every time you change the code.

If a compile error occurs, the last successful preview is preserved and a "Showing last successful preview" badge is overlaid on the preview panel. The badge disappears once the error is fixed.

Section titled “Template gallery”

Click the "Templates" button in the toolbar to open the template gallery modal. You can browse all .tdsl samples included in examples/ as a thumbnail grid and load any of them into the editor with a single click.

| Sample | Description | | ---------------------------------- | ------------------------------------------------------------------------- | | Chinese Dynasties | A practical example with dynasty span / event / event_range entries | | Modern History | A practical example with modern span / event_range entries | | DSL Basic Grammar (minimal) | A minimal sample covering span / event / event_range | | Wikidata Import (requires network) | A reference example for Wikidata import syntax (not executable in WebUI) |

Selecting a sample from the gallery replaces the current editor content. If you want to keep your current work, download it first.

Download .tdsl

Section titled “Download .tdsl”

Click the "Download" button in the toolbar to download the current editor content as timeline.tdsl.

Code formatting (Format)

Section titled “Code formatting (Format)”

Click the "Format" button in the toolbar or press Ctrl/Cmd+Shift+F to reformat the editor content (v1.10.0+). The formatter re-emits the AST, producing a canonical form with 2-space indentation and one blank line between blocks. Because the change is applied as a CodeMirror transaction, Undo/Redo behave as expected.

If parsing fails, only an error toast is shown and the editor is left unchanged. Comments are preserved like tdsl fmt, although comments inside blocks may be relocated to canonical positions.

Adjusting the editor/preview split

Section titled “Adjusting the editor/preview split”

Drag the handle between the editor and preview left or right to adjust the split ratio between 15% and 85%. The default is editor 40% / preview 60%.

Mobile and tablet support

Section titled “Mobile and tablet support”

The layout switches automatically based on screen width.

| Width | Layout | | -------------------------- | ------------------------------ | | ≤768px (smartphone) | Editor / Preview tab switching | | 769px–1024px (tablet) | Top-and-bottom two-row layout | | 1025px and above (desktop) | Left-right split layout |

Sharing via ?source= query

Section titled “Sharing via ?source= query”

Adding a ?source= query to the URL opens the Playground with the specified source code already loaded in the editor. The "Open this sample in the Playground" links in Quick Start and grammar documentation use this mechanism.

/playground/?source=timeline%20%22サンプル%22%20%7B...%7D
Section titled “"Copy as link" button”

Click the Copy as link button in the toolbar to copy a URL containing the current editor source as a gzip-compressed payload. Opening the link in a new tab restores the same source — handy for sharing code in issues or social posts.

/playground/?src=<gzip + base64url-encoded source>

If the full URL would exceed 8,192 characters, the share fails with a message (use .tdsl file download and attachment instead).

Limitations

Section titled “Limitations”

The Playground runs on WebAssembly inside your browser. The following features are not available:

  • import wikidata — requires external network access
  • Writing to the filesystem — direct saving to a local .tdsl file requires the CLI

For transitioning to a full workflow, see Installation and Quick Start.

Section titled “Related links”