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.

Choosing a sample

Section titled “Choosing a sample”

Use the “Sample” select in the toolbar to choose which sample to load into the editor.

SampleDescription
Hello Timeline — minimal single-event exampleA minimal timeline with a single event
Three marker types — span / event / event_rangeAn example showing span, event and event_range together
Multiple lanes — parallel events with hierarchyParallel events organized into a lane hierarchy
Wikidata import (CLI-only feature demo)A reference example for Wikidata import syntax (not executable in the Playground)

Selecting a sample replaces the current editor content. If you want to keep your current work, save it first with “Save .tdsl”.

Display scale

Section titled “Display scale”

The “Scale” select lets you set the preview scale to Auto, 0.5×, 1×, 2×, 4× or 8×.

Always show labels (print/listing)

Section titled “Always show labels (print/listing)”

Toggling the “Always show labels (print/listing)” checkbox in the toolbar draws labels for every Event / EventRange without requiring a hover, matching the CLI’s --show-event-labels (v1.17.0+). This is handy when you want to review or print every item at a glance. Your choice is saved in the browser and kept for future visits.

Open file

Section titled “Open file”

The “Open file” button loads a local .tdsl / .txt file into the editor.

Saving (.tdsl / .svg / HTML)

Section titled “Saving (.tdsl / .svg / HTML)”

“Save .tdsl” saves the current editor content as a .tdsl file, and “Save .svg” / “Save HTML” save the rendered result as SVG / HTML. The SVG / HTML buttons are enabled only while the preview has rendered successfully.

Layout

Section titled “Layout”

The editor, preview and diagnostics panels are shown together. The editor/preview width ratio is fixed and cannot be adjusted by dragging. At 820px and below, the layout switches to a single stacked column.

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”