Puzzle single-file component support for Zed, backed by a standalone Tree-sitter grammar.
- HTML-like highlighting in
<puzzle-view>and<puzzle-skeleton> - JavaScript in
<script>and TypeScript in<script lang="ts"> - CSS in
<style>and<style scoped> - TypeScript-aware highlighting inside Puzzle expressions
- Puzzle conditionals, case blocks, collection/range loops, and SVG directives
- Distinct component tags, event/action names, modifiers, and
@sigils - Bracket matching, auto-indentation, and a component-aware outline
- Tailwind CSS language-server opt-in for
.pzlfiles
The parser is deliberately kept in this repository instead of hiding the language definition inside Zed-specific code. It can also be reused by editors with Tree-sitter support, including Neovim and Helix.
The checked-in extension.toml points its grammar at this local checkout. The
repository must contain at least one Git commit because Zed loads grammars by
Git revision.
- Open Zed's Extensions page.
- Run zed: install dev extension from the command palette, or click Install Dev Extension.
- Select this
puzzle-zedfolder. - Open a
.pzlfile. Zed should select Puzzle automatically.
Zed requires Rust installed through rustup when building development extensions.
npm install
npm run generate
npm test
npm run test:examplesnpm test runs focused Tree-sitter corpus fixtures. npm run test:examples
parses every .pzl file in the sibling Puzzle framework repository and fails
if any syntax error is produced. If Puzzle lives elsewhere, set
PUZZLE_EXAMPLES_DIR.
Before publishing, change the grammar repository in extension.toml from the
local file:// URL to:
[grammars.puzzle]
repository = "https://github.com/magic-spells/puzzle-zed"
commit = "<full commit SHA containing the generated parser>"Then submit the public repository to
zed-industries/extensions as
a Git submodule and add its entry to that repository's extensions.toml.
This extension provides structural parsing, highlighting, injections, outline, and editing behavior. Compiler-backed diagnostics, completion, navigation, and formatting would require a Puzzle language server. The Puzzle compiler remains the source of truth for semantic validation.
MIT