Playground

Use this playground to test valid XML-like Grain syntax, inspect how primitives render in the web adapter, and sanity-check examples before copying them into an app or agent runtime.

What This Verifies

• The current parser accepts the markup you are testing.
• The web adapter can render the resulting document shape.
• Companion elements such as <result>, <progress>, and <warning> behave as part of the documented contract.

Local Preview Note

When running the documentation site locally, use pnpm docs:preview from the repo root and open the exact /grain/ URL it prints. The project-site base path is part of the deployment contract, so / returning 404 is expected.

editor.g

12345678910111213141516171819

Grain document editor

Edit the Grain document and inspect the rendered preview beside it.

<message role="assistant"> <think model="chain-of-thought" visible="false"> The user wants a weather update for Mumbai. </think> <stream>Checking Mumbai weather...</stream> </message> <tool name="get_weather" args='{"city":"Mumbai"}' status="running"> <input>City: Mumbai</input> <progress value="45" max="100">Fetching live conditions</progress> </tool> <tool name="get_weather" status="complete"> <result temperature="28" condition="sunny" humidity="65" /> </tool> <message role="assistant"> <stream>It is 28°C and sunny in Mumbai.</stream> </message>

preview

Interactive preview initializes after hydration.

Interactive preview initializes after hydration. Open the docs preview at /grain/; the site is mounted under the project base path.