Language dictionary

Language

Version

Status

Line model

Identifier

Pattern

^[A-Za-z][A-Za-z0-9_]*$

Examples

• home
• pricing_card
• submit_button

Elements

• page
• container
• section
• navigation
• card
• heading
• text
• button
• link
• image
• input
• form
• label
• textarea
• list
• item
• divider
• select
• option
• icon
• video
• audio
• custom element

Properties

Layout

• viewport fill
• direction vertical|horizontal
• layout grid
• grid columns N
• width|height fill|content|N pixels|N percent
• minimum|maximum width|height
• gap
• alignment
• distribution
• wrap
• overflow
• position
• top|right|bottom|left

Visual

• background
• gradient
• text color
• padding
• horizontal padding
• vertical padding
• margin
• border
• border radius
• shadow
• opacity
• backdrop blur

Typography

• font size
• font weight
• line height
• letter spacing
• text alignment
• text decoration

Motion

• transition
• hover background
• hover lift
• entry fade
• entry rise
• entry scale
• rotation
• scale
• z index
• aspect ratio

Sentences

Declaration

Create <type> <id> [displaying <text>] [containing <ids>] [with <properties>].

Click

When <element> is clicked, show|hide|toggle <element>.

Navigation

When <element> is clicked, navigate to <page>.

Responsive

On screens below <pixels> pixels, <element> direction|width|gap|grid columns is <value>.

State

Create state <id> with value <literal>.

Collection

Create collection <id> with values <quoted values>.

Backend

Use Supabase backend.

Backend

Auth

• Enable email and password authentication.
• Protect page <page> with authentication.
• After authentication navigate to <page>.
• Use form <form> to sign up|sign in with email <input> and password <input>.
• When <button> is clicked, sign out.

Database

• Create database table <table>.
• <table> has [required] [unique] text|integer|number|boolean|uuid|timestamp|date|json column <column> [with default <value>].
• <table> belongs to authenticated user through <column>.
• <table> references <table> through <column> deleting cascade|restrict|set null.
• Create index <index> on <table> using <columns>.
• Allow authenticated users to read, create, update, and delete their own rows in <table> through <column>.

Data

• Create data query <query> from <table> selecting <columns>.
• <query> orders by <column> ascending|descending.
• Load <query> on page <page> into <collection>.
• Use form <form> to insert into <table> mapping <input> to <column>.
• Use form <form> to update <table> using state <state> as <column> mapping <input> to <column>.
• When <button> is clicked, delete from <table> using state <state> as <column>.

Storage

• Create public|private storage bucket <bucket>.
• Allow authenticated users to read, upload, update, and delete their own files in <bucket>.
• When <input> changes, upload file to <bucket> and store path in <state>.

Functions

• Create server function <function>.
• <function> requires authentication.
• <function> accepts text|number|boolean field <field>.
• <function> returns JSON message <text>.
• <function> forwards request to URL from secret <SECRET>.
• Use form <form> to call server function <function>.

Provisioning

• GitHub repository
• Supabase project
• PostgreSQL migrations and RLS
• Storage policies
• Edge Functions
• Vercel environment variables
• Vercel production deployment

Exports

• React + TypeScript
• HTML + CSS + JavaScript

Limits

• No arbitrary JavaScript
• No arbitrary npm packages
• Supabase is the v1 backend
• No native mobile target