Canvas Component

Data-driven canvas that renders ViewSchema definitions using the ViewRenderer component.

Preview

Card Title

This is the card description text.

Schema Definition

{
  "type": "view",
  "as": "section",
  "style": {
    "background": "$colors.card",
    "padding": "$spacing.6",
    "borderRadius": "$radii.lg",
    "shadow": "md",
    "display": "flex",
    "direction": "column",
    "gap": "$spacing.4"
  },
  "children": [
    {
      "type": "view",
      "as": "h3",
      "style": {
        "color": "$colors.foreground"
      },
      "children": "Card Title"
    },
    {
      "type": "view",
      "as": "p",
      "style": {
        "color": "$colors.mutedForeground"
      },
      "children": "This is the card description text."
    },
    {
      "type": "view",
      "style": {
        "display": "flex",
        "direction": "row",
        "gap": "$spacing.2",
        "marginTop": "$spacing.2"
      },
      "children": [
        {
          "type": "view",
          "as": "button",
          "style": {
            "background": "$colors.primary",
            "color": "$colors.primaryForeground",
            "padding": "$spacing.2 $spacing.4",
            "borderRadius": "$radii.md",
            "cursor": "pointer"
          },
          "events": {
            "tap": "primary-action"
          },
          "children": "Primary"
        },
        {
          "type": "view",
          "as": "button",
          "style": {
            "background": "transparent",
            "color": "$colors.mutedForeground",
            "border": "1px solid $colors.border",
            "padding": "$spacing.2 $spacing.4",
            "borderRadius": "$radii.md",
            "cursor": "pointer"
          },
          "events": {
            "tap": "secondary-action"
          },
          "children": "Secondary"
        }
      ]
    }
  ]
}

Examples

Usage

<script>
  import { Canvas } from '$lib/canvas';
  import { cardWithContent } from '$lib/view-schema/examples';

  const components = [
    {
      type: 'ViewSchema',
      schema: cardWithContent
    }
  ];
</script>

<Canvas {components} />

API Reference

Prop	Type	Description
components	ComponentDef[]	Array of component definitions to render
customComponents	SvelteMap<string, Component>	Map of custom components to register
renderComponent	RenderComponentFn	Custom render function for advanced use cases
class	string	Additional CSS classes