{ "version": "1.10.1", "categories": [ { "id": "data", "name": "Data Fetching", "description": "Declarative HTTP requests via HTML attributes" }, { "id": "state", "name": "State Management", "description": "Local and global reactive state" }, { "id": "binding", "name": "Rendering & Binding", "description": "One-way and two-way data binding" }, { "id": "conditionals", "name": "Conditionals", "description": "Conditional rendering and visibility" }, { "id": "loops", "name": "Loops", "description": "List rendering with iteration" }, { "id": "events", "name": "Events", "description": "Event handling and lifecycle hooks" }, { "id": "styling", "name": "Styling", "description": "Dynamic CSS classes and inline styles" }, { "id": "forms", "name": "Forms & Validation", "description": "Built-in form validation with $form context" }, { "id": "routing", "name": "Routing", "description": "Client-side SPA routing" }, { "id": "animation", "name": "Animation", "description": "Enter/leave animations and transitions" }, { "id": "dnd", "name": "Drag and Drop", "description": "Declarative drag-and-drop system" }, { "id": "i18n", "name": "Internationalization", "description": "Translation directives" }, { "id": "refs", "name": "Refs & Templates", "description": "Element references and template instantiation" }, { "id": "head", "name": "Head Management", "description": "Reactive document head directives (title, meta, canonical, JSON-LD)" }, { "id": "misc", "name": "Miscellaneous", "description": "Utility directives" } ], "directives": [ { "name": "base", "category": "data", "description": "Set API base URL for all descendant HTTP directives", "syntax": "", "examples": [ { "html": "", "description": "Set base URL for all fetch directives" } ] }, { "name": "get", "category": "data", "description": "Fetch data via HTTP GET request", "syntax": "", "examples": [ { "html": "
\n
\n

\n
\n
", "description": "Fetch and display a list of users" } ] }, { "name": "post", "category": "data", "description": "Submit data via HTTP POST request", "syntax": "", "examples": [ { "html": "
\n \n \n \n
", "description": "Submit login form via POST" } ] }, { "name": "put", "category": "data", "description": "Update data via HTTP PUT request", "syntax": "" }, { "name": "patch", "category": "data", "description": "Partial update via HTTP PATCH request", "syntax": "" }, { "name": "delete", "category": "data", "description": "Delete data via HTTP DELETE request", "syntax": "" }, { "name": "as", "category": "data", "description": "Name for fetched data in the local context", "syntax": "", "examples": [ { "html": "
\n

\n
", "description": "Store fetched data as 'user'" } ] }, { "name": "body", "category": "data", "description": "Request body for POST/PUT/PATCH requests", "syntax": "" }, { "name": "headers", "category": "data", "description": "Custom request headers", "syntax": "" }, { "name": "params", "category": "data", "description": "Query parameters appended to the URL", "syntax": "" }, { "name": "cached", "category": "data", "description": "Cache HTTP responses. Options: memory (default), local (localStorage), session (sessionStorage)", "syntax": "" }, { "name": "into", "category": "data", "description": "Write response to a named global store", "syntax": "" }, { "name": "debounce", "category": "data", "description": "Debounce reactive URL refetches (milliseconds)", "syntax": "" }, { "name": "retry", "category": "data", "description": "Override global retry count for this request", "syntax": "" }, { "name": "retry-delay", "category": "data", "description": "Override global retry delay in ms (default: 1000)", "syntax": "" }, { "name": "state", "category": "state", "description": "Create local reactive state on an element", "syntax": "", "examples": [ { "html": "
\n \n \n
", "description": "Counter with local state" } ] }, { "name": "store", "category": "state", "description": "Define or access a global reactive store", "syntax": "", "examples": [ { "html": "
\n \n
", "description": "Define a global auth store" } ] }, { "name": "computed", "category": "state", "description": "Derived reactive value, recomputed when dependencies change", "syntax": "" }, { "name": "watch", "category": "state", "description": "React to value changes by executing an expression", "syntax": "" }, { "name": "persist", "category": "state", "description": "Persist state to localStorage or sessionStorage", "syntax": "" }, { "name": "persist-key", "category": "state", "description": "Custom localStorage/sessionStorage key for persisted state", "syntax": "" }, { "name": "persist-fields", "category": "state", "description": "Comma-separated list of state fields to persist selectively", "syntax": "" }, { "name": "model", "category": "binding", "description": "Two-way binding for input elements", "syntax": "", "examples": [ { "html": "
\n \n

Hello, !

\n
", "description": "Two-way binding with live preview" } ] }, { "name": "bind", "category": "binding", "description": "One-way data binding — sets element textContent", "syntax": "", "examples": [ { "html": "

", "description": "Display user name" }, { "html": "", "description": "Bind to an expression" } ] }, { "name": "bind-html", "category": "binding", "description": "Set innerHTML (sanitized) from an expression", "syntax": "" }, { "name": "bind-*", "category": "binding", "description": "Bind any HTML attribute to an expression", "syntax": "", "examples": [ { "html": "", "description": "Bind src and alt attributes" }, { "html": "Profile", "description": "Dynamic href" } ] }, { "name": "if", "category": "conditionals", "description": "Conditionally render element (removes from DOM when false)", "syntax": "", "examples": [ { "html": "
\n

\n
", "description": "Show only when user exists" } ] }, { "name": "else-if", "category": "conditionals", "description": "Chained conditional following an if", "syntax": "" }, { "name": "then", "category": "conditionals", "description": "Template to render when condition is truthy", "syntax": "" }, { "name": "else", "category": "conditionals", "description": "Template to render when condition is falsy, or fallback block after if", "syntax": "" }, { "name": "show", "category": "conditionals", "description": "Toggle element visibility via CSS display (element stays in DOM)", "syntax": "" }, { "name": "hide", "category": "conditionals", "description": "Inverse of show — hides element when condition is true", "syntax": "" }, { "name": "switch", "category": "conditionals", "description": "Switch/case rendering based on a value", "syntax": "" }, { "name": "case", "category": "conditionals", "description": "Case match inside a switch block", "syntax": "" }, { "name": "default", "category": "conditionals", "description": "Default case inside a switch block", "syntax": "" }, { "name": "each", "category": "loops", "description": "Simple loop — iterates over an array", "syntax": "", "examples": [ { "html": "
    \n
  • \n
", "description": "Render a list of todos" } ] }, { "name": "foreach", "category": "loops", "description": "Extended loop with advanced features (template, filter, sort, limit, offset)", "syntax": "", "examples": [ { "html": "\n
", "description": "Loop with external template" } ] }, { "name": "from", "category": "loops", "description": "Source array for foreach loop", "syntax": "" }, { "name": "template", "category": "loops", "description": "Template ID to clone for each iteration in foreach", "syntax": "" }, { "name": "index", "category": "loops", "description": "Variable name for the current index in foreach", "syntax": "" }, { "name": "key", "category": "loops", "description": "Unique key for efficient list diffing", "syntax": "" }, { "name": "filter", "category": "loops", "description": "Filter expression for foreach — only render matching items", "syntax": "" }, { "name": "sort", "category": "loops", "description": "Sort property for foreach", "syntax": "" }, { "name": "limit", "category": "loops", "description": "Maximum number of items to render in foreach", "syntax": "" }, { "name": "offset", "category": "loops", "description": "Number of items to skip in foreach", "syntax": "" }, { "name": "on:*", "category": "events", "description": "Event handler — supports all DOM events plus lifecycle hooks", "syntax": "", "examples": [ { "html": "", "description": "Click handler" }, { "html": "
", "description": "Submit with preventDefault" }, { "html": "", "description": "Key modifier" } ], "notes": "Modifiers: .prevent, .stop, .once, .self. Key modifiers: .enter, .escape, .tab, etc. Lifecycle: on:mounted, on:unmounted" }, { "name": "class-*", "category": "styling", "description": "Toggle a CSS class based on a condition", "syntax": "", "examples": [ { "html": "
", "description": "Conditional CSS classes" } ] }, { "name": "class-map", "category": "styling", "description": "Apply multiple CSS classes from an object expression", "syntax": "" }, { "name": "style-*", "category": "styling", "description": "Set an inline style property", "syntax": "", "examples": [ { "html": "
", "description": "Dynamic inline styles" } ] }, { "name": "style-map", "category": "styling", "description": "Apply multiple inline styles from an object expression", "syntax": "" }, { "name": "validate", "category": "forms", "description": "Enable validation on a form or field. Built-in validators: required, email, url, min, max, custom", "syntax": " or ", "examples": [ { "html": "\n \n \n \n

\n", "description": "Login form with validation" } ], "notes": "$form context provides: valid, dirty, touched, errors, firstError, errorCount, fields, values, pending, reset()" }, { "name": "route", "category": "routing", "description": "Define a route or create a navigation link", "syntax": " or