Getting Started

index

0

status

Draft

Here’s a completed simple example of how to use Workbench:

<script>
  import Workbench from "../Workbench.svelte";
  import { setupProps, useProp } from "../workbench.js";

  setupProps({
    hue: {
      type: "number",
      value: 180,
      min: 0,
      max: 360,
      unit: "deg",
      configurable: true,
      playable: true,
      duration: 3000,
      label: "Hue",
      showValue: true,
    },
    baseColor: {
      derive: ({ hue }) => `hsl(${hue.value}, 100%, 50%)`,
      inputs: ["hue"],
      fallback: "#00f"
    }
  });

  const color = useProp("baseColor");
</script>

<Workbench>
  <button style="color: white; background-color: {color}">Interactive Button</button>
</Workbench>

For richer and more explorable examples, you can combine Workbench with Blueprint components to create layered, explorable UI demonstrations.

<script>
  import { Workbench, setupProps, useProp } from "workbench";
  import { Element, Shadow, Fill, Content } from "blueprint";

  setupProps({
    hue: {
      type: "number",
      value: 180,
      min: 0,
      max: 360,
      unit: "deg",
      configurable: true,
      playable: true,
      duration: 3000,
      label: "Hue",
      showValue: true,
    },
    baseColor: {
      derive: ({ hue }) => `hsl(${hue.value}, 100%, 50%)`,
      inputs: ["hue"],
      fallback: "#00f"
    }
  });

  const color = useProp("baseColor");
</script>

<Workbench explodable={true} zoomLevel={4}>
  <Element borderRadius="0.5rem">
    <Shadow elevation={-1} />
    <Fill color={color} elevation={0} />
    <Content color="white">Button</Content>
  </Element>
</Workbench>

See the Blueprint documentation for details on using layered UI components.