Tips & How-To

• Browse Examples: Click the Examples button in the top toolbar to open a gallery of ready-made grammars. You can load any example as a starting point for your own project.
• Load from URL: Use Load URL to pull a grammar JSON file from the web (paste sites, GitHub raw, gists, etc.). Hosted loads start with grammar/CSS editors read-only until you confirm editing in the banner. For long Tracery grammars and hosting quirks: Share URL → Long Tracery grammars, hosting & link issues.
• Sharing Links: Use the Share URL button to generate a link that encodes your grammar and CSS.
  Tip: If you close the editor panels (using the "Hide Editors" button) before creating a share link, the link will open on the other end with the editors hidden for a clean, presentation-style view.
• Editor Visibility: Toggle the editor panels using the "Hide Editors" button in the toolbar. This is useful for previewing your output or sharing a focused view.
• Keyboard Shortcuts: Common shortcuts include Ctrl+Enter (reroll), Ctrl+S (save), Ctrl+⇧F (format), and Tab (indent).

---

Content Output Sanitization

To ensure safety when viewing generated stories, Tracery Studio limits the HTML features that can appear in the output. The complete list of whitelisted elements is:

Allowed Tags

Allowed CSS & Attributes

A broad range of CSS styling is permitted via the style attribute, including sizes, typography, flexbox structures, colors, padding, and pseudo selectors like scroll-margin.

Allowed tag-specific attributes include:

Note: class and id attributes are allowed for targeting with your CSS editor.

---

Special Links (Jump & Origin)

You can create interactive documents by placing specially formatted links in your text:

• scrollto:
  Use CSS selectors to create page jump links.
  <a href="scrollto:.chapter-2">Jump to Chapter 2</a>
  Hint: use the scroll-margin-top css property on your target element to ensure targets don't end up hidden behind sticky headers.
• setorigin:
  Use Tracery symbol IDs to re-roll the entire document starting from a new symbol. This behaves like a Choose-Your-Own-Adventure page jump!
  <a href="setorigin:basement">Go into the basement</a>