Grida

https://grida.co/docs
Admin
Grida is an open-source design-to-code toolkit that converts designs into human-level code for...
Tokens:241,983
Snippets:3,402
Trust Score:7.3
Update:4 months ago
Show doc for...
Tokens:
Raw
### Example Project Structure (Next.js)

Source: https://grida.co/docs/cli

Illustrates the typical project structure after setup with Grida CLI for a Next.js project, highlighting created and modified files.

```bash
...  
├── .grida             (created)  
├── .env               (modified)  
├── .gitignore         (modified)  
├── README.md  
├── grida              (created)  
│   └── .gitkeep       (created)  
├── grida.config.js    (created)  
├── next-env.d.ts  
├── package.json       (modified)  
├── pages  
│   └── _app.tsx  
│   └── index.tsx  
├── public  
├── styles  
├── tsconfig.json  
└── ...  
```

--------------------------------

### Example Project Structure (Flutter)

Source: https://grida.co/docs/cli

Illustrates the typical project structure after setup with Grida CLI for a Flutter project, highlighting created and modified files.

```bash
...  
├── .grida                   (created)  
├── .env                     (modified)  
├── .gitignore               (modified)  
├── README.md  
├── analysis_options.yaml  
├── build  
├── flutter_app.iml  
├── grida.config.js  
├── lib  
│   ├── grida                (created)  
│   │   └── .gitkeep  
│   └── main.dart  
├── pubspec.lock  
├── pubspec.yaml  
├── test  
│   └── widget_test.dart  
├── web  
├── macos  
├── ios  
├── landroid  
├── linux  
├── windows  
└── ...  
```

--------------------------------

### Start and Reset Local Supabase

Source: https://grida.co/docs/contributing/billing

Commands to start the local Supabase instance and reset its database. This is a prerequisite for billing setup.

```bash
supabase start  

supabase db reset  
```

--------------------------------

### Framework Configuration Example (React)

Source: https://grida.co/docs/cli

Example of framework configuration for a React project, specifying framework, language, and component declaration style.

```javascript
/**  
 * @type {import('@grida/builder-config').FrameworkConfig}  
 */  
const frameworkConfig = {  
  framework: "react",  
  language: "tsx",  
  component_declaration_style: {  
    exporting_style: {  
      type: "export-named-functional-component",  
      declaration_syntax_choice: "function",  
      exporting_position: "with-declaration",  
    },  
  },  
};  
```

--------------------------------

### Customer Metadata Example (JSON)

Source: https://grida.co/docs/platform/customers

Example of how to structure the 'metadata' field for a customer. Metadata allows for key-value pairs for additional information.

```json
{
  "my_custom_field_1": "value 1",
  "my_custom_field_2": "value 2"
}
```

--------------------------------

### Customer Tags Example

Source: https://grida.co/docs/platform/customers

Example of how to structure the 'tags' field for a customer. Tags are project-scoped and used for categorization.

```json
{
  "tags": ["premium", "vip", "new-customer"]
}
```

--------------------------------

### Run Development Server

Source: https://grida.co/docs/contributing/billing

Starts the development server for the editor component.

```bash
pnpm dev --filter=editor
```

--------------------------------

### Install Grida CLI Globally

Source: https://grida.co/docs/cli

Installs the Grida CLI globally using npm. It is recommended to install locally within a project for better dependency management.

```bash
npm i -g grida
```

--------------------------------

### Install and Configure Cloudflared Tunnel

Source: https://grida.co/docs/contributing/billing

Steps to install cloudflared, log in to Cloudflare, create a tunnel, and route DNS for webhook forwarding.

```bash
brew install cloudflared

cloudflared tunnel login                                 # browser → pick a Cloudflare zone you control  

cloudflared tunnel create grida-webhooks  

cloudflared tunnel route dns grida-webhooks <hostname>   # e.g. metronome-dev.yourdomain.co  
```

--------------------------------

### Example Universal and Canonical Paths

Source: https://grida.co/docs/wg/platform/universal-docs-routing

Illustrates the mapping between concise universal paths and their fully expanded, tenant-specific canonical paths.

```text
universal path| canonical path (example)  
---|---
`/_/dash`| `/acme/project/dash`  
`/_/ciam`| `/acme/project/ciam`  
`/_/connect/share`| `/acme/project/00000000-0000-0000-0000-000000001234/connect/share`
```

--------------------------------

### Paints Naming Examples

Source: https://grida.co/docs/wg/feat-schema/naming-conventions

Examples of snake_case naming for paint-related properties.

```plaintext
fill_paints

stroke_paints
```

--------------------------------

### Layout Naming Examples

Source: https://grida.co/docs/wg/feat-schema/naming-conventions

Examples of snake_case naming for layout-related properties, including padding and alignment.

```plaintext
layout_padding_top

layout_padding_right

layout_padding_bottom

layout_padding_left

layout_main_axis_alignment

layout_cross_axis_alignment

layout_main_axis_gap

layout_cross_axis_gap
```

--------------------------------

### WASM-on-Node Benchmark Setup

Source: https://grida.co/docs/wg/feat-2d/wasm-benchmarking

Set up a WASM-on-Node benchmark by loading the emscripten module in Node.js and measuring execution time.

```javascript
Node.js script that loads the emscripten ".js" + ".wasm" module, calls C-ABI functions, measures with "performance.now()".
```

--------------------------------

### Customer Metadata Example (CSV)

Source: https://grida.co/docs/platform/customers

Example of how to represent customer metadata in a CSV file. Each metadata key becomes a column prefixed with 'metadata.'.

```text
metadata.my_custom_field_1,metadata.my_custom_field_2
value 1,value 2
```

--------------------------------

### Vector Naming Examples

Source: https://grida.co/docs/wg/feat-schema/naming-conventions

Examples of snake_case naming for vector-related properties.

```plaintext
vector_network

fill_rule
```

--------------------------------

### Start Grida Flutter Daemon

Source: https://grida.co/docs/cli/flutter-daemon

Run this command in your terminal to start the local Flutter daemon server. Press Ctrl+C to stop it.

```bash
grida flutter daemon  

```

--------------------------------

### Node Hierarchy Example

Source: https://grida.co/docs/wg/feat-tray

Illustrates the hierarchical structure of nodes, showing how Trays can group Containers and be nested within each other or the Scene.

```text
Scene  

+-- Tray ("Authentication flows")  

|   +-- Container (Login screen)  

|   +-- Container (Signup screen)  

|   +-- Container (Forgot password)  

+-- Tray ("Dashboard")  

|   +-- Tray ("Dashboard -- Overview")   <-- nested tray  

|   |   +-- Container (Summary view)  

|   |   +-- Container (Stats panel)  

|   +-- Container (Settings page)  

+-- Container (Standalone prototype)  
```

--------------------------------

### Root SVG Clip-Path Installation

Source: https://grida.co/docs/wg/research/chromium/svg/clip-path

Illustrates the sequence of operations for installing a clip-path on a root SVG element. The clip-path is applied before the SVG content is rendered.

```text
PaintLayerPainter::PaintWithPhase(layer)  

  ├─ Install paint property tree node for clip-path  

  │    via ClipPathClipper::PathBasedClip(root_object, offset)  

  │      reference_box = border-box rect of the <svg> in CSS pixels  

  │      shape path is computed in CSS-pixel space, then translated by  

  │      paint_offset to land in canvas-pixel space  

  │    the clip is in CSS-pixel coords (zoomed)  

  └─ SVGRootPainter::PaintReplaced(...)  

       ↳ each SVG child paints normally; the clip is already active  


```

--------------------------------

### SVG <use> Element Example

Source: https://grida.co/docs/wg/research/chromium/svg/use-and-foreign-object

This example demonstrates how to use the SVG <use> element to instantiate a symbol with specified position and dimensions. The <use> element references an element with the ID 'sym' and positions it at x=10, y=10 with a width of 50 and height of 50.

```html
<use href="#sym" x="10" y="10" width="50" height="50"/>  

```

--------------------------------

### CSS URL Resolution Example

Source: https://grida.co/docs/wg/research/chromium/external-resource-loading

Demonstrates how CSS url() values are resolved against the document's base URL during style resolution to form the resource key.

```text
CSS:     background-image: url("logo.png")  

Resolve: https://example.com/css/../logo.png → https://example.com/logo.png  
```

--------------------------------

### Get Caret Style at Offset

Source: https://grida.co/docs/wg/feat-text-editing/attributed-text

Retrieves the text style of the upstream run at a given offset. Handles boundary conditions at the start and end of the text.

```rust
caret_style_at(offset: u32) -> &TextStyle
```

--------------------------------

### Initialize Project with Grida CLI

Source: https://grida.co/docs/cli

Initiates a new project with Grida CLI. If no project root (package.json or pubspec.yaml) is found, it prompts to create one.

```bash
$ grida init  

> No project root is found (package.json or pubspec.yml) with framework configuration. Do you want to continue without creating a project? (y/N)  
```

--------------------------------

### Effects Naming Examples

Source: https://grida.co/docs/wg/feat-schema/naming-conventions

Examples of snake_case naming for effect-related properties.

```plaintext
fe_blur

fe_backdrop_blur
```

--------------------------------

### Typography Naming Examples

Source: https://grida.co/docs/wg/feat-schema/naming-conventions

Examples of snake_case naming for typography-related properties.

```plaintext
font_size

font_family

line_height
```

--------------------------------

### Stroke Naming Examples

Source: https://grida.co/docs/wg/feat-schema/naming-conventions

Examples of snake_case naming for stroke-related properties.

```plaintext
stroke_width

stroke_align

stroke_join

stroke_cap

stroke_miter_limit
```

--------------------------------

### Run Native Benchmarks

Source: https://grida.co/docs/wg/feat-2d/wasm-load-scene-optimization

Execute native benchmarks for scene loading using the grida_dev binary.

```bash
cargo run -p grida_dev --release -- load-bench fixtures/local/perf/local/<your-fixture>.grida --iterations 3
```

--------------------------------

### Geometry Naming Examples

Source: https://grida.co/docs/wg/feat-schema/naming-conventions

Examples of snake_case naming for geometry-related properties.

```plaintext
corner_radius

corner_smoothing
```

--------------------------------

### SMIL Sync-Base Timing Example

Source: https://grida.co/docs/wg/research/chromium/svg/animation-and-smil

Demonstrates chaining animations using sync-base timing, where one animation's end time triggers the next. This is implemented as a dependency graph.

```html
<animate id="a" begin="0s" dur="1s"/>
<animate id="b" begin="a.end+0.5s" dur="1s"/>
```

--------------------------------

### Configure Local Environment Variables

Source: https://grida.co/docs/contributing/billing

Append necessary billing-related keys and tokens to the local environment file. Ensure to replace placeholders with your actual test keys.

```bash
supabase status -o env | grep SUPABASE_SECRET_KEY >> editor/.env.test.local  

echo 'STRIPE_SECRET_KEY=sk_test_...'   >> editor/.env.test.local  

echo 'METRONOME_API_TOKEN=...'         >> editor/.env.test.local  

# STRIPE_WEBHOOK_SECRET / METRONOME_WEBHOOK_SECRET / WEBHOOK_TUNNEL_HOSTNAME — added below  
```

--------------------------------

### Rectangular Geometry Naming Examples

Source: https://grida.co/docs/wg/feat-schema/naming-conventions

Examples of snake_case naming for rectangular geometry properties, including corners and stroke widths.

```plaintext
rectangular_corner_radius_top_left

rectangular_corner_radius_top_right

rectangular_corner_radius_bottom_left

rectangular_corner_radius_bottom_right

rectangular_stroke_width_top

rectangular_stroke_width_right

rectangular_stroke_width_bottom

rectangular_stroke_width_left
```

--------------------------------

### Run WASM-on-Node Benchmarks

Source: https://grida.co/docs/wg/feat-2d/wasm-load-scene-optimization

Navigate to the WASM directory and run the scene loading benchmarks using vitest.

```bash
cd crates/grida-canvas-wasm

npx vitest run __test__/bench-load-scene.test.ts
```

--------------------------------

### LUT Table Example

Source: https://grida.co/docs/wg/feat-painting/fe-noise

Example of LUT table values for a threshold at 51%. This format maps discrete values to a transfer function.

```plaintext
tableValues="1 1 1 1 1 ... (51 ones) ... 0 0 0 0 ... (49 zeros)"
```

--------------------------------

### SMIL Sandwich Model Example

Source: https://grida.co/docs/wg/research/chromium/svg/animation-and-smil

Demonstrates the SMIL 'sandwich' model where multiple animations targeting the same attribute form a priority stack. Shows how animation precedence changes over time.

```html
<svg>
  <rect id="r" fill="yellow">
    <set attributeName="fill" to="blue"     begin="1s; 3s" dur="1s"/>
    <set attributeName="fill" to="lightblue" begin="1.5s"  dur="2s"/>
  </rect>
</svg>

t=0    →  no active animations          → fill = yellow (baseVal)
t=1    →  set#1 active                  → fill = blue
t=1.5  →  set#1 + set#2, set#2 wins     → fill = lightblue
t=2    →  set#2 active alone            → fill = lightblue
t=3    →  set#1 restarts (higher prio)  → fill = blue
t=4    →  no active animations          → fill = yellow
```

--------------------------------

### Provision Billing Substrates

Source: https://grida.co/docs/contributing/billing

Run CLI commands to set up Stripe and Metronome configurations within your local Supabase database. These commands are idempotent and should be re-run after any database reset.

```bash
pnpm tsx editor/scripts/billing/cli.ts setup:stripe  

pnpm tsx editor/scripts/billing/cli.ts setup:metronome  
```

--------------------------------

### Figma File Link Example

Source: https://grida.co/docs/with-figma/guides/how-to-get-sharable-design-link

This is an example of a link to the entire Figma file. It is derived from a frame link by removing the 'node-id' query parameter.

```url
https://www.figma.com/file/XXXXXXX/example-file
```

--------------------------------

### Display List Compilation Example

Source: https://grida.co/docs/wg/feat-2d/optimization

Illustrates the transformation of a logical tree structure into a flattened list of render commands. This process resolves transforms, clip bounds, opacity, and z-order for non-recursive rendering.

```rust
RenderCommand { node_id: Rect1, transform: ..., clip: ..., z: ... },
RenderCommand { node_id: Rect2, transform: ..., clip: ..., z: ... },
RenderCommand { node_id: Rect3, transform: ..., clip: ..., z: ... }
```

--------------------------------

### Configure Design Source (Figma)

Source: https://grida.co/docs/cli

Prompts for design source details, including the provider (e.g., Figma), file URL, and a personal access token for Figma.

```bash
> Where from to import your design? : figma  
> Please enter your figma file url : https://www.figma.com/file/xxx  
> Please enter your figma personal access token.: ******************  
```

--------------------------------

### Figma Frame Link Example

Source: https://grida.co/docs/with-figma/guides/how-to-get-sharable-design-link

This is an example of a direct link to a specific frame within a Figma file. Use this when you need to point collaborators to a particular design element.

```url
https://www.figma.com/file/XXXXXXX/example-file?node-id=0%3A1
```
Tokens:
Raw