Mirrow

https://mirrow.app/docs
Admin
Mirrow is a command-line compiler that transforms ergonomic `.mirrow` source code into...
Tokens:11,633
Snippets:39
Trust Score:5.3
Update:1 year ago
Show doc for...
Tokens:
Raw
### Mirrow 'Hello World' Example

Source: https://mirrow.app/docs/hello-world

A minimal 'Hello World' program in Mirrow, demonstrating basic SVG canvas setup and text element placement. It compiles to a functional SVG with specified size and content.

```mirrow
svg {
  size: (400, 200)
  box: (0, 0, 400, 200)

  text {
    at: (200, 100)
    "Hello, World!"
  }
}
```

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

### Mirrow Zero-to-Output Example

Source: https://mirrow.app/docs/index

This example provides a complete workflow for using Mirrow. It first creates a sample 'demo.mirrow' file with an animated circle using Mirrow's syntax. Then, it uses the Mirrow CLI to compile this file into 'demo.svg'. The generated SVG can be viewed in any vector viewer and will display an animated circle.

```bash
cat <<'EOF' > demo.mirrow
svg {
  box: (0, 0, 200, 200)

  circle {
    at: (100, 100)
    r: 40
    fill: "hotpink"

    animate {
      prop: "r"
      from: 40
      to: 60
      dur: 2s
      repeat: indefinite
    }
  }
}
EOF

npx mirrow -i demo.mirrow -o demo.svg
```

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

### Mirrow CLI Compilation Example

Source: https://context7.com/context7/mirrow_app/llms.txt

Illustrates how to compile Mirrow files into SVG assets using the Mirrow command-line interface. This command is suitable for build scripts and CI/CD pipelines.

```bash
npx mirrow -i source.mirrow -o dist/output.svg
```

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

### Mirrow with Style and Script Blocks

Source: https://mirrow.app/docs/hello-world

Example demonstrating the use of 'style' and 'script' blocks within Mirrow to apply CSS styling and JavaScript event handling to SVG elements. This allows for self-contained, interactive SVGs.

```mirrow
svg {
  size: (200, 200)
  box: (0, 0, 200, 200)

  circle {
    id: "dot"
    at: (100, 100)
    r: 40
    fill: "hotpink"
    on:click {
      console.log("Circle clicked!")
    }
  }
}

style {
  #dot:hover {
    fill: "lightcoral";
  }
}

script {
  console.log("Mirrow script block loaded");
}
```

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

### Mirrow Animation Transform Example

Source: https://context7.com/context7/mirrow_app/llms.txt

Demonstrates transform-based animations in Mirrow, specifically a rotating rectangle. This example showcases the `animateTransform` element with `type: "rotate"`.

```mirrow
svg {
  box: (0, 0, 200, 200)

  rect {
    at: (75, 75)
    size: (50, 50)
    fill: "orange"

    animateTransform {
      attributeName: "transform"
      type: "rotate"
      from: "0 100 100"
      to: "360 100 100"
      dur: 4s
      repeat: indefinite
    }
  }
}
```

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

### Mirrow Animated Circle Example

Source: https://context7.com/context7/mirrow_app/llms.txt

Illustrates how to create an animated circle in Mirrow. It showcases the 'animate' block for defining property changes over time, including duration and repetition.

```mirrow
svg {
  box: (0, 0, 200, 200)

  circle {
    at: (100, 100)
    r: 40
    fill: "hotpink"

    animate {
      prop: "r"
      from: 40
      to: 60
      dur: 2s
      repeat: indefinite
    }
  }
}
```

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

### JavaScript Event Handling in Mirrow

Source: https://mirrow.app/docs/states-events

This example shows how to attach JavaScript event listeners to elements in Mirrow. The `on:click` block defines a handler that executes JavaScript code when the element is clicked. This allows for dynamic behavior and interaction within the Mirrow application.

```mirrow
g {
  id: "panel"
  class: "closed"

  on:click {
    console.log("Hello World");
  }
}
```

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

### fePointLight Element

Source: https://mirrow.app/docs/fe-point-light

Documentation for the fePointLight element, including its attributes and their mappings.

```APIDOC
## fePointLight Element

### Description
This section outlines the attributes Mirrow exposes for the 'fePointLight' tag. Values map to native SVG where possible and list Mirrow compiler expansions when relevant.

### Method
N/A (This is element documentation, not an API endpoint)

### Endpoint
N/A

### Parameters
#### Attributes
- **at** (tuple[3] number, number, number) - Maps to x, y, z
- **class** (string) - Maps to class
- **id** (string) - Maps to id
- **lang** (string) - Maps to lang
- **style** (string) - Maps to style
- **tabIndex** (number) - Maps to tabindex
- **xmlBase** (string) - Maps to xml:base
- **xmlLang** (string) - Maps to xml:lang
- **xmlSpace** (string) - Maps to xml:space

### Request Example
N/A

### Response
N/A
```

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

### CLI Compilation with Mirrow

Source: https://context7.com/context7/mirrow_app/llms.txt

Demonstrates basic command-line compilation of .mirrow files to SVG using npx. This is the primary method for converting source code to final graphics.

```bash
# Install and compile in one command
npx mirrow -i icon.mirrow -o icon.svg

# Compile demo file
npx mirrow -i demo.mirrow -o demo.svg
```

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

### Run Mirrow CLI Command

Source: https://mirrow.app/docs/index

This snippet demonstrates how to use the Mirrow command-line interface (CLI) to compile a .mirrow file into an SVG file. It utilizes npx to run the latest version of Mirrow, specifying the input and output file paths. Mirrow will create or overwrite the output SVG file.

```bash
npx mirrow -i file.mirrow -o file.svg
```

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

### feOffset Element Documentation

Source: https://mirrow.app/docs/fe-offset

This section provides details on the attributes available for the 'feOffset' element in Mirrow, including their types, SVG mappings, and any specific notes.

```APIDOC
## feOffset Element

### Description
This page outlines the attributes Mirrow exposes for the 'feOffset' tag. Values map to native SVG where possible and list Mirrow compiler expansions when relevant.

### Method
GET

### Endpoint
/websites/mirrow_app/elements/feOffset

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```json
{
  "example": "No request body needed for retrieving element documentation."
}
```

### Response
#### Success Response (200)
- **attributes** (object) - A collection of attributes available for the feOffset element.
  - **at** (tuple[2] (number, number)) - Maps to SVG 'x' attribute.
  - **y** (tuple[2] (number, number)) - Maps to SVG 'y' attribute.
  - **class** (string) - Maps to SVG 'class' attribute.
  - **dx** (number) - Maps to SVG 'dx' attribute.
  - **dy** (number) - Maps to SVG 'dy' attribute.
  - **id** (string) - Maps to SVG 'id' attribute.
  - **in** (string) - Maps to SVG 'in' attribute.
  - **lang** (string) - Maps to SVG 'lang' attribute.
  - **result** (string) - Maps to SVG 'result' attribute.
  - **size** (tuple[2] (number, number)) - Maps to SVG 'width' attribute.
  - **height** (tuple[2] (number, number)) - Maps to SVG 'height' attribute.
  - **style** (string) - Maps to SVG 'style' attribute.
  - **tabIndex** (number) - Maps to SVG 'tabindex' attribute.
  - **xmlBase** (string) - Maps to SVG 'xml:base' attribute.
  - **xmlLang** (string) - Maps to SVG 'xml:lang' attribute.
  - **xmlSpace** (string) - Maps to SVG 'xml:space' attribute.

#### Response Example
```json
{
  "attributes": {
    "at": {
      "type": "tuple[2] (number, number)",
      "maps_to": "x",
      "notes": ""
    },
    "y": {
      "type": "tuple[2] (number, number)",
      "maps_to": null,
      "notes": ""
    },
    "class": {
      "type": "string",
      "maps_to": "—",
      "notes": ""
    },
    "dx": {
      "type": "number",
      "maps_to": "—",
      "notes": ""
    },
    "dy": {
      "type": "number",
      "maps_to": "—",
      "notes": ""
    },
    "id": {
      "type": "string",
      "maps_to": "—",
      "notes": ""
    },
    "in": {
      "type": "string",
      "maps_to": "—",
      "notes": ""
    },
    "lang": {
      "type": "string",
      "maps_to": "—",
      "notes": ""
    },
    "result": {
      "type": "string",
      "maps_to": "—",
      "notes": ""
    },
    "size": {
      "type": "tuple[2] (number, number)",
      "maps_to": "width",
      "notes": ""
    },
    "height": {
      "type": "tuple[2] (number, number)",
      "maps_to": null,
      "notes": ""
    },
    "style": {
      "type": "string",
      "maps_to": "—",
      "notes": ""
    },
    "tabIndex": {
      "type": "number",
      "maps_to": "tabindex",
      "notes": ""
    },
    "xmlBase": {
      "type": "string",
      "maps_to": "xml:base",
      "notes": ""
    },
    "xmlLang": {
      "type": "string",
      "maps_to": "xml:lang",
      "notes": ""
    },
    "xmlSpace": {
      "type": "string",
      "maps_to": "xml:space",
      "notes": ""
    }
  }
}
```
```

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

### Mirrow Linear Gradient Fill

Source: https://context7.com/context7/mirrow_app/llms.txt

Demonstrates how to create and apply a linear gradient to shapes using the 'defs' and 'linearGradient' blocks in Mirrow. Includes defining color stops.

```mirrow
svg {
  box: (0, 0, 200, 200)

  defs {
    linearGradient {
      id: "grad1"
      from: (0, 0)
      to: (100, 100)

      stop { offset: 0% style: "stop-color: rgb(255,255,0)" }
      stop { offset: 100% style: "stop-color: rgb(255,0,0)" }
    }
  }

  rect {
    at: (10, 10)
    size: (180, 180)
    fill: "url(#grad1)"
  }
}
```

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

### Mirrow Text Styling

Source: https://context7.com/context7/mirrow_app/llms.txt

Shows how to style text elements in Mirrow, including properties like fontFamily, fontSize, fontWeight, fill, and textAnchor for precise typography control.

```mirrow
svg {
  box: (0, 0, 400, 100)

  text {
    at: (200, 50)
    fontFamily: "Arial, sans-serif"
    fontSize: 24
    fontWeight: "bold"
    fill: "#333"
    textAnchor: "middle"
    "Styled Text"
  }
}
```

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

### Mirrow Filter Effects (Blur)

Source: https://context7.com/context7/mirrow_app/llms.txt

Demonstrates applying filter effects, such as Gaussian blur, to SVG elements using Mirrow's 'defs' and 'filter' blocks. Shows how to reference filters.

```mirrow
svg {
  box: (0, 0, 200, 200)

  defs {
    filter {
      id: "blur1"

      feGaussianBlur {
        in: "SourceGraphic"
        stdDeviation: 5
      }
    }
  }

  circle {
    at: (100, 100)
    r: 50
    fill: "cyan"
    filter: "url(#blur1)"
  }
}
```

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

### Mirrow feDiffuseLighting Element

Source: https://mirrow.app/docs/fe-diffuse-lighting

This section details the attributes available for the 'feDiffuseLighting' element in Mirrow, including their types, SVG mappings, and any specific notes.

```APIDOC
## feDiffuseLighting Element Attributes

### Description
Mirrow exposes attributes for the `feDiffuseLighting` SVG element. Values generally map to native SVG attributes, with Mirrow-specific expansions noted.

### Method
N/A (This is a documentation of an element's attributes, not an API endpoint)

### Endpoint
N/A

### Parameters
#### Attributes
- **at** (tuple[2] (number, number)) - Maps to `x`
- **y** (tuple[2] (number, number)) - Maps to `y`
- **class** (string) - Maps to `class`
- **diffuseConstant** (number) - Maps to `diffuseConstant`
- **id** (string) - Maps to `id`
- **in** (string) - Maps to `in`
- **kernelUnitLength** (string) - Maps to `kernelUnitLength`
- **lang** (string) - Maps to `lang`
- **lightingColor** (string) - Maps to `lighting-color`
- **result** (string) - Maps to `result`
- **size** (tuple[2] (number, number)) - Maps to `width` and `height`
- **style** (string) - Maps to `style`
- **surfaceScale** (number) - Maps to `surfaceScale`
- **tabIndex** (number) - Maps to `tabindex`
- **xmlBase** (string) - Maps to `xml:base`
- **xmlLang** (string) - Maps to `xml:lang`
- **xmlSpace** (string) - Maps to `xml:space`

### Request Example
N/A

### Response
#### Success Response (N/A)
N/A

#### Response Example
N/A
```

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

### Mirrow CSS State Management (@hover)

Source: https://context7.com/context7/mirrow_app/llms.txt

Shows how to implement hover effects directly within the Mirrow DSL using the '@hover' block. This allows for dynamic styling changes without JavaScript.

```mirrow
svg {
  size: (200, 100)
  box: (0, 0, 200, 100)

  rect {
    at: (16, 16)
    size: (128, 64)
    rx: 8
    fill: "#4f46e5"

    @hover {
      fill: "#6366f1"
      stroke: "#ffffff"
    }
  }
}
```

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

### feSpotLight Element Attributes

Source: https://mirrow.app/docs/fe-spot-light

This section details the attributes available for the feSpotLight element in Mirrow. These attributes map to native SVG where possible, with Mirrow compiler expansions noted.

```APIDOC
## feSpotLight Element

### Description
This page outlines the attributes Mirrow exposes for the feSpotLight tag. Values map to native SVG where possible and list Mirrow compiler expansions when relevant.

### Method
N/A (This is attribute documentation, not an API endpoint)

### Endpoint
N/A

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
None

### Response
#### Success Response (200)
N/A

#### Response Example
None

### Attributes
- **at** (tuple[3] number, number, number) - Maps to `x`, `y`, `z`
- **class** (string) - Maps to `class`
- **id** (string) - Maps to `id`
- **lang** (string) - Maps to `lang`
- **limitingConeAngle** (number) - Maps to `limitingConeAngle`
- **pointsAt** (tuple[3] number, number, number) - Maps to `pointsAtX`, `pointsAtY`, `pointsAtZ`
- **specularExponent** (number) - Maps to `specularExponent`
- **style** (string) - Maps to `style`
- **tabIndex** (number) - Maps to `tabindex`
- **xmlBase** (string) - Maps to `xml:base`
- **xmlLang** (string) - Maps to `xml:lang`
- **xmlSpace** (string) - Maps to `xml:space`
```

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

### feBlend Element Attributes

Source: https://mirrow.app/docs/fe-blend

This section details the attributes available for the 'feBlend' element in Mirrow, mapping them to native SVG attributes and Mirrow compiler expansions.

```APIDOC
## feBlend Element Attributes

### Description
This page outlines the attributes Mirrow exposes for the 'feBlend' tag. Values map to native SVG where possible and list Mirrow compiler expansions when relevant.

### Method
N/A (This describes attributes of an element, not an API endpoint)

### Endpoint
N/A

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Request Example
N/A

### Response
#### Success Response (200)
N/A

#### Response Example
N/A

## Attributes

### `at`
- **Type**: `tuple[2] (number, number)`
- **Maps To**: `x`
- **Description**: Y-coordinate.

### `y`
- **Type**: `tuple[2] (number, number)`
- **Maps To**: `y`
- **Description**: Y-coordinate.

### `class`
- **Type**: `string`
- **Maps To**: `class`
- **Description**: CSS class.

### `id`
- **Type**: `string`
- **Maps To**: `id`
- **Description**: Element ID.

### `in`
- **Type**: `string`
- **Maps To**: `in`
- **Description**: Input for the filter primitive.

### `in2`
- **Type**: `string`
- **Maps To**: `in2`
- **Description**: Second input for the filter primitive.

### `lang`
- **Type**: `string`
- **Maps To**: `lang`
- **Description**: Language of the element.

### `mode`
- **Type**: `string`
- **Maps To**: `mode`
- **Description**: The blending mode.

### `result`
- **Type**: `string`
- **Maps To**: `result`
- **Description**: Identifier for the result of the filter primitive.

### `size`
- **Type**: `tuple[2] (number, number)`
- **Maps To**: `width`, `height`
- **Description**: The size of the element.

### `height`
- **Type**: `tuple[2] (number, number)`
- **Maps To**: `height`
- **Description**: Height of the element.

### `style`
- **Type**: `string`
- **Maps To**: `style`
- **Description**: Inline CSS style.

### `tabIndex`
- **Type**: `number`
- **Maps To**: `tabindex`
- **Description**: Tab order of the element.

### `xmlBase`
- **Type**: `string`
- **Maps To**: `xml:base`
- **Description**: Base URL for resolving relative URIs.

### `xmlLang`
- **Type**: `string`
- **Maps To**: `xml:lang`
- **Description**: Language of the element's content.

### `xmlSpace`
- **Type**: `string`
- **Maps To**: `xml:space`
- **Description**: Specifies whether whitespace is preserved.

```

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

### Mirrow Style and Script Blocks

Source: https://context7.com/context7/mirrow_app/llms.txt

Shows how to embed CSS styles and JavaScript directly within a Mirrow file. This allows for localized styling and client-side interactivity alongside SVG definitions.

```mirrow
svg {
  size: (200, 200)
  box: (0, 0, 200, 200)

  circle {
    id: "dot"
    at: (100, 100)
    r: 40
    fill: "hotpink"

    on:click {
      this.style.fill = "lightcoral"
    }
  }
}

style {
  #dot:hover {
    fill: lightcoral;
    cursor: pointer;
  }
}

script {
  console.log("Mirrow script block loaded")
}
```

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

### feFuncG Element Attributes

Source: https://mirrow.app/docs/fe-func-g

This section details the attributes supported by the feFuncG element in Mirrow, including their types, SVG mappings, and any special notes.

```APIDOC
## feFuncG Element Attributes

### Description
This page outlines the attributes Mirrow exposes for the `feFuncG` tag. Values map to native SVG where possible and list Mirrow compiler expansions when relevant.

### Method
GET

### Endpoint
/websites/mirrow_app/feFuncG

### Parameters
#### Query Parameters
- **amplitude** (number) - Optional - Attribute for feFuncG.
- **class** (string) - Optional - CSS class attribute.
- **exponent** (number) - Optional - Attribute for feFuncG.
- **id** (string) - Optional - Unique identifier for the element.
- **intercept** (number) - Optional - Attribute for feFuncG.
- **lang** (string) - Optional - Language code for the element.
- **offset** (number) - Optional - Attribute for feFuncG.
- **slope** (number) - Optional - Attribute for feFuncG.
- **style** (string) - Optional - Inline CSS styles.
- **tabIndex** (number) - Optional - Maps to `tabindex` in SVG.
- **tableValues** (string) - Optional - Attribute for feFuncG.
- **type** (string) - Optional - Attribute for feFuncG.
- **xmlBase** (string) - Optional - Maps to `xml:base`.
- **xmlLang** (string) - Optional - Maps to `xml:lang`.
- **xmlSpace** (string) - Optional - Maps to `xml:space`.

### Request Example
```json
{
  "amplitude": 1,
  "class": "my-class",
  "exponent": 2,
  "id": "my-fefuncg",
  "intercept": 0.5,
  "lang": "en-US",
  "offset": 10,
  "slope": 1,
  "style": "fill: red;",
  "tabIndex": 0,
  "tableValues": "0 1",
  "type": "linear",
  "xmlBase": "http://example.com",
  "xmlLang": "en",
  "xmlSpace": "preserve"
}
```

### Response
#### Success Response (200)
- **message** (string) - Indicates successful processing of the request.

#### Response Example
```json
{
  "message": "feFuncG attributes processed successfully."
}
```
```

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

### feDistantLight Element Attributes

Source: https://mirrow.app/docs/fe-distant-light

This section details the attributes available for the feDistantLight element in Mirrow, including their types, SVG mappings, and any specific notes.

```APIDOC
## feDistantLight Element

### Description
This page outlines the attributes Mirrow exposes for the feDistantLight tag. Values map to native SVG where possible and list Mirrow compiler expansions when relevant.

### Method
N/A (This is a declarative element, not an API endpoint)

### Endpoint
N/A

### Parameters
#### Attributes
- **azimuth** (number) - Optional - Maps to SVG 'azimuth'
- **class** (string) - Optional - Maps to SVG 'class'
- **elevation** (number) - Optional - Maps to SVG 'elevation'
- **id** (string) - Optional - Maps to SVG 'id'
- **lang** (string) - Optional - Maps to SVG 'lang'
- **style** (string) - Optional - Maps to SVG 'style'
- **tabIndex** (number) - Optional - Maps to SVG 'tabindex'
- **xmlBase** (string) - Optional - Maps to SVG 'xml:base'
- **xmlLang** (string) - Optional - Maps to SVG 'xml:lang'
- **xmlSpace** (string) - Optional - Maps to SVG 'xml:space'

### Request Example
N/A (This is a declarative element)

### Response
N/A (This is a declarative element)
```

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

### Mirrow Path Drawing

Source: https://context7.com/context7/mirrow_app/llms.txt

Shows how to define complex shapes using the 'path' element in Mirrow, leveraging the 'data' attribute for SVG path commands. Useful for custom illustrations.

```mirrow
svg {
  box: (0, 0, 100, 100)

  path {
    data: "M10 10 L90 90 M90 10 L10 90"
    stroke: "black"
    strokeWidth: 2
    fill: "none"
  }
}
```

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

### Metadata Element Attributes

Source: https://mirrow.app/docs/metadata

This section details the attributes available for the 'metadata' element in Mirrow, including their types, SVG mappings, and any specific notes.

```APIDOC
## Metadata Element Attributes

### Description
This page outlines the attributes Mirrow exposes for the 'metadata' tag. Values map to native SVG where possible and list Mirrow compiler expansions when relevant.

### Attributes

#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
None

### Response
#### Success Response (200)
- **class** (string) - Maps to 'class'.
- **id** (string) - Maps to 'id'.
- **lang** (string) - Maps to 'lang'.
- **style** (string) - Maps to 'style'.
- **tabIndex** (number) - Maps to 'tabindex'.
- **xmlBase** (string) - Maps to 'xml:base'.
- **xmlLang** (string) - Maps to 'xml:lang'.
- **xmlSpace** (string) - Maps to 'xml:space'.

#### Response Example
None
```

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

### feComponentTransfer Element

Source: https://mirrow.app/docs/fe-component-transfer

This page outlines the attributes Mirrow exposes for the feComponentTransfer tag. Values map to native SVG where possible and list Mirrow compiler expansions when relevant.

```APIDOC
## feComponentTransfer Element

### Description
This page outlines the attributes Mirrow exposes for this tag. Values map to native SVG where possible and list Mirrow compiler expansions when relevant.

### Method
N/A (Element Documentation)

### Endpoint
N/A (Element Documentation)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
None

### Response
#### Success Response (200)
None

#### Response Example
None

## Attributes

- **at** (tuple[2] (number, number)) - Maps to `x`
- **y** (tuple[2] (number, number)) - Maps to `y`
- **class** (string) - Maps to `class`
- **id** (string) - Maps to `id`
- **in** (string) - Maps to `in`
- **lang** (string) - Maps to `lang`
- **result** (string) - Maps to `result`
- **size** (tuple[2] (number, number)) - Maps to `width`
- **height** (tuple[2] (number, number)) - Maps to `height`
- **style** (string) - Maps to `style`
- **tabIndex** (number) - Maps to `tabindex`
- **xmlBase** (string) - Maps to `xml:base`
- **xmlLang** (string) - Maps to `xml:lang`
- **xmlSpace** (string) - Maps to `xml:space`
```

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

### feColorMatrix Element

Source: https://mirrow.app/docs/fe-color-matrix

This section outlines the attributes Mirrow exposes for the 'feColorMatrix' tag. Values map to native SVG where possible, and Mirrow compiler expansions are listed when relevant.

```APIDOC
## feColorMatrix Element

### Description
This page outlines the attributes Mirrow exposes for this tag. Values map to native SVG where possible and list Mirrow compiler expansions when relevant.

### Method
Not Applicable (Element Documentation)

### Endpoint
Not Applicable (Element Documentation)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
None

### Response
#### Success Response (200)
- **at** (tuple[2] (number, number)) - Maps to `x`
- **y** (tuple[2] (number, number)) - Maps to `y`
- **class** (string) - Maps to `class`
- **id** (string) - Maps to `id`
- **in** (string) - Maps to `in`
- **lang** (string) - Maps to `lang`
- **result** (string) - Maps to `result`
- **size** (tuple[2] (number, number)) - Maps to `width`
- **height** (tuple[2] (number, number)) - Maps to `height`
- **style** (string) - Maps to `style`
- **tabIndex** (number) - Maps to `tabindex`
- **type** (string) - Maps to `type`
- **values** (string) - Maps to `values`
- **xmlBase** (string) - Maps to `xml:base`
- **xmlLang** (string) - Maps to `xml:lang`
- **xmlSpace** (string) - Maps to `xml:space`

#### Response Example
None
```

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

### Mirrow JavaScript Event Handlers (on:click)

Source: https://context7.com/context7/mirrow_app/llms.txt

Demonstrates how to attach JavaScript event handlers, specifically 'onclick', to elements in Mirrow. This enables interactive SVG graphics.

```mirrow
svg {
  size: (200, 200)
  box: (0, 0, 200, 200)

  circle {
    id: "dot"
    at: (100, 100)
    r: 40
    fill: "hotpink"

    on:click {
      console.log("Circle clicked!")
    }
  }
}
```

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

### Mirrow Rectangle with Rounded Corners

Source: https://context7.com/context7/mirrow_app/llms.txt

Demonstrates the creation of a rectangle with rounded corners using Mirrow syntax. It shows how to specify size, radius, fill, and stroke properties.

```mirrow
svg {
  box: (0, 0, 300, 200)

  rect {
    at: (50, 50)
    size: (200, 100)
    radius: (10, 10)
    fill: "#4f46e5"
    stroke: "#1e1b4b"
    strokeWidth: 2
  }
}
```

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

### feImage Element Attributes

Source: https://mirrow.app/docs/fe-image

This section details the attributes supported by the 'feImage' element in Mirrow, including their types, SVG mappings, and any special notes.

```APIDOC
## feImage Element Attributes

### Description
This page outlines the attributes Mirrow exposes for the 'feImage' tag. Values map to native SVG where possible and list Mirrow compiler expansions when relevant.

### Method
N/A (This is documentation for an element, not an API endpoint)

### Endpoint
N/A

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Request Example
N/A

### Response
#### Success Response (200)
N/A

#### Response Example
N/A

### Attributes
- **at** (tuple[2] (number, number)) - Maps to `x`.
- **y** (tuple[2] (number, number)) - No direct mapping specified.
- **class** (string) - Maps to `class`.
- **crossOrigin** (string) - Maps to `crossorigin`.
- **href** (string) - No direct mapping specified.
- **id** (string) - Maps to `id`.
- **lang** (string) - Maps to `lang`.
- **preserveAspectRatio** (string) - Maps to `preserveAspectRatio`.
- **result** (string) - Maps to `result`.
- **size** (tuple[2] (number, number)) - Maps to `width`.
- **height** (tuple[2] (number, number)) - No direct mapping specified.
- **style** (string) - Maps to `style`.
- **tabIndex** (number) - Maps to `tabindex`.
- **xlinkHref** (string) - Maps to `xlink:href`.
- **xmlBase** (string) - Maps to `xml:base`.
- **xmlLang** (string) - Maps to `xml:lang`.
- **xmlSpace** (string) - Maps to `xml:space`.
```

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

### radialGradient Element Attributes

Source: https://mirrow.app/docs/radial-gradient

This section details the attributes available for the radialGradient element, their types, SVG mappings, and any specific notes or Mirrow compiler expansions.

```APIDOC
## radialGradient Element Attributes

### Description
This page outlines the attributes Mirrow exposes for the `radialGradient` tag. Values map to native SVG where possible and list Mirrow compiler expansions when relevant.

### Attributes

#### Path Parameters
- None

#### Query Parameters
- None

#### Request Body
- None

### Request Example
```json
{
  "example": "No request body applicable for element attribute documentation."
}
```

### Response
#### Success Response (200)
- **at** (tuple[2] (number, number)) - Maps to `cx`
- **cy** (any) - No direct SVG mapping specified.
- **class** (string) - Maps to the `class` attribute.
- **focus** (tuple[2] (number, number)) - Maps to `fx`
- **fy** (any) - No direct SVG mapping specified.
- **fr** (number) - Maps to the `r` attribute.
- **gradientTransform** (string) - Maps to the `gradientTransform` attribute.
- **gradientUnits** (string) - Maps to the `gradientUnits` attribute.
- **href** (string) - Maps to the `href` attribute.
- **id** (string) - Maps to the `id` attribute.
- **lang** (string) - Maps to the `lang` attribute.
- **r** (number) - Maps to the `r` attribute.
- **requiredExtensions** (string) - Maps to the `requiredExtensions` attribute.
- **requiredFeatures** (string) - Maps to the `requiredFeatures` attribute.
- **spreadMethod** (string) - Maps to the `spreadMethod` attribute.
- **style** (string) - Maps to the `style` attribute.
- **systemLanguage** (string) - Maps to the `systemLanguage` attribute.
- **tabIndex** (number) - Maps to `tabindex`.
- **xlinkHref** (string) - Maps to `xlink:href`.
- **xmlBase** (string) - Maps to `xml:base`.
- **xmlLang** (string) - Maps to `xml:lang`.
- **xmlSpace** (string) - Maps to `xml:space`.

#### Response Example
```json
{
  "example": "No response body applicable for element attribute documentation."
}
```
```

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

### feDisplacementMap Element Attributes

Source: https://mirrow.app/docs/fe-displacement-map

This section details the attributes available for the 'feDisplacementMap' element in Mirrow, mapping them to native SVG where applicable.

```APIDOC
## feDisplacementMap Element Attributes

### Description
This page outlines the attributes Mirrow exposes for the 'feDisplacementMap' tag. Values map to native SVG where possible and list Mirrow compiler expansions when relevant.

### Method
GET

### Endpoint
/websites/mirrow_app/elements/feDisplacementMap

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```json
{
  "example": "No request body for this documentation."
}
```

### Response
#### Success Response (200)
- **at** (tuple[2] (number, number)) - Maps to `x`
- **y** (tuple[2] (number, number)) - Maps to `y`
- **class** (string) - Maps to `class`
- **id** (string) - Maps to `id`
- **in** (string) - Maps to `in`
- **in2** (string) - Maps to `in2`
- **lang** (string) - Maps to `lang`
- **result** (string) - Maps to `result`
- **scale** (number) - Maps to `scale`
- **size** (tuple[2] (number, number)) - Maps to `width` and `height`
- **style** (string) - Maps to `style`
- **tabIndex** (number) - Maps to `tabindex`
- **xChannelSelector** (string) - Maps to `xChannelSelector`
- **xmlBase** (string) - Maps to `xml:base`
- **xmlLang** (string) - Maps to `xml:lang`
- **xmlSpace** (string) - Maps to `xml:space`
- **yChannelSelector** (string) - Maps to `yChannelSelector`

#### Response Example
```json
{
  "example": "No response body example available for this documentation."
}
```
```

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

### feDropShadow Element Attributes

Source: https://mirrow.app/docs/fe-drop-shadow

This section details the attributes available for the feDropShadow element in Mirrow. It includes the attribute name, its type, how it maps to native SVG, and any relevant notes or Mirrow compiler expansions.

```APIDOC
## feDropShadow Element

### Description
This page outlines the attributes Mirrow exposes for the `feDropShadow` tag. Values map to native SVG where possible and list Mirrow compiler expansions when relevant.

### Method
N/A (Element Documentation)

### Endpoint
N/A (Element Documentation)

### Attributes
#### Element Attributes
- **at** (tuple[2] (number, number)) - Maps to `x`
- **y** (number) - Description not specified
- **class** (string) - Maps to `class`
- **dx** (number) - Description not specified
- **dy** (number) - Description not specified
- **floodColor** (string) - Maps to `flood-color`
- **floodOpacity** (number) - Maps to `flood-opacity`
- **id** (string) - Maps to `id`
- **in** (string) - Maps to `in`
- **lang** (string) - Maps to `lang`
- **result** (string) - Maps to `result`
- **size** (tuple[2] (number, number)) - Maps to `width` and `height`
- **stdDeviation** (string) - Maps to `stdDeviation`
- **style** (string) - Maps to `style`
- **tabIndex** (number) - Maps to `tabindex`
- **xmlBase** (string) - Maps to `xml:base`
- **xmlLang** (string) - Maps to `xml:lang`
- **xmlSpace** (string) - Maps to `xml:space`

### Request Example
N/A (Element Documentation)

### Response
#### Success Response (200)
N/A (Element Documentation)

#### Response Example
N/A (Element Documentation)
```

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

### Mirrow Grouped Elements (g)

Source: https://context7.com/context7/mirrow_app/llms.txt

Illustrates the use of the 'g' element in Mirrow for grouping shapes. This allows for applying transformations and event handlers to multiple elements collectively.

```mirrow
svg {
  box: (0, 0, 300, 300)

  g {
    id: "panel"
    class: "closed"
    transform: "translate(50, 50)"

    circle { at: (0, 0) r: 20 fill: "red" }
    circle { at: (40, 0) r: 20 fill: "blue" }
    circle { at: (80, 0) r: 20 fill: "green" }

    on:click {
      console.log("Group clicked")
    }
  }
}
```

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

### ForeignObject Element Attributes

Source: https://mirrow.app/docs/foreign-object

This section details the attributes available for the `foreignObject` element in Mirrow. It includes attribute names, their types, how they map to native SVG attributes, and any specific notes or expansions provided by the Mirrow compiler.

```APIDOC
## `foreignObject` Element Attributes

### Description
Mirrow exposes attributes for the `foreignObject` tag, mapping them to native SVG where possible and noting Mirrow compiler expansions.

### Method
N/A (Element Attributes)

### Endpoint
N/A (Element Attributes)

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Request Example
N/A

### Response
#### Success Response (200)
N/A

#### Response Example
N/A

### Attributes
- **at** (tuple[2] (number, number)) - Maps to `x`
- **y** (N/A) - Maps to `y`
- **class** (string) - Maps to `class`
- **clipPath** (string) - Maps to `clip-path`
- **clipRule** (string) - Maps to `clip-rule`
- **color** (string) - Maps to `color`
- **colorInterpolation** (string) - Maps to `color-interpolation`
- **colorInterpolationFilters** (string) - Maps to `color-interpolation-filters`
- **colorRendering** (string) - Maps to `color-rendering`
- **cursor** (string) - Maps to `cursor`
- **display** (string) - Maps to `display`
- **fill** (string) - Maps to `fill`
- **fillOpacity** (number) - Maps to `fill-opacity`
- **fillRule** (string) - Maps to `fill-rule`
- **filter** (string) - Maps to `filter`
- **id** (string) - Maps to `id`
- **imageRendering** (string) - Maps to `image-rendering`
- **lang** (string) - Maps to `lang`
- **markerEnd** (string) - Maps to `marker-end`
- **markerMid** (string) - Maps to `marker-mid`
- **markerStart** (string) - Maps to `marker-start`
- **mask** (string) - Maps to `mask`
- **opacity** (number) - Maps to `opacity`
- **paintOrder** (string) - Maps to `paint-order`
- **pointerEvents** (string) - Maps to `pointer-events`
- **requiredExtensions** (string) - Maps to `requiredExtensions`
- **requiredFeatures** (string) - Maps to `requiredFeatures`
- **size** (tuple[2] (number, number)) - Maps to `width`
- **height** (N/A) - Maps to `height`
- **stroke** (string) - Maps to `stroke`
- **strokeDasharray** (string) - Maps to `stroke-dasharray`
- **strokeDashoffset** (number) - Maps to `stroke-dashoffset`
- **strokeLinecap** (string) - Maps to `stroke-linecap`
- **strokeLinejoin** (string) - Maps to `stroke-linejoin`
- **strokeMiterlimit** (number) - Maps to `stroke-miterlimit`
- **strokeOpacity** (number) - Maps to `stroke-opacity`
- **strokeWidth** (number) - Maps to `stroke-width`
- **style** (string) - Maps to `style`
- **systemLanguage** (string) - Maps to `systemLanguage`
- **tabIndex** (number) - Maps to `tabindex`
- **transform** (string) - Maps to `transform`
- **vectorEffect** (string) - Maps to `vector-effect`
- **visibility** (string) - Maps to `visibility`
- **xmlBase** (string) - Maps to `xml:base`
- **xmlLang** (string) - Maps to `xml:lang`
- **xmlSpace** (string) - Maps to `xml:space`
```
Tokens:
Raw