Variables Guide

// Define and use variables in your snippets

Defining Variables

Variables are defined in snippet.yaml with a schema.

// snippet.yaml

variables:
  name:
    description: "Function name"
    name: "Function Name"
    schema:
      type: string
      default: "myFunction"

  framework:
    description: "Target framework"
    schema:
      type: string
      default: "react"
    suggests:
      - "react"
      - "vue"
      - "svelte"

Variable Types

string

Text input (default)

number

Numeric input

boolean

Yes/No input

Built-in Variables

These variables are automatically available in all snippets:

project-name

Project name from package.json or directory name

Using Variables in Templates

// {{ name }}.ts

export function {{ name }}() {
  // Component: {{ name }}
  // Type: {{ type }}
}

export default {{ name }};