Habit Viewer

The Habit Viewer is a standalone web application for visualizing habit workflows. It can render habits as interactive diagrams or export them as images.

Live Viewer

The viewer is available at: https://codenteam.com/intersect/habits/viewer/

URL Parameters

Pass habit content and rendering options via URL query parameters:

Parameter	Type	Default	Description
habit	string	required	URL-encoded YAML or JSON habit content. Use \n for newlines.
format	string	interactive	Render format: interactive, svg, png, or html
download	boolean	false	Auto-download the rendered output when format is not interactive
filename	string	habit-workflow	Filename for downloaded exports (without extension)
hideControls	boolean	false	Hide zoom controls and minimap
bgColor	string	#0f172a	Background color (hex format)
fitView	boolean	true	Automatically fit the view to show all nodes

Examples

Basic Interactive View

/viewer/?habit=id%3A%20my-habit%0Aname%3A%20My%20Habit%0Anodes%3A%0A%20%20-%20id%3A%20node1%0A%20%20%20%20type%3A%20bits%0A%20%20%20%20data%3A%0A%20%20%20%20%20%20framework%3A%20bits%0A%20%20%20%20%20%20module%3A%20%40ha-bits%2Fbit-http%0A%20%20%20%20%20%20label%3A%20HTTP%20Request

Export as PNG with Auto-Download

/viewer/?habit=<encoded-yaml>&format=png&download=true&filename=my-workflow

Minimal View (No Controls)

/viewer/?habit=<encoded-yaml>&hideControls=true

Custom Background Color

/viewer/?habit=<encoded-yaml>&bgColor=%231e293b

Habit Content Format

The viewer accepts habits in YAML or JSON format. Here's a minimal example:

id: example-habit
name: Example Habit
nodes:
  - id: trigger
    type: bits
    data:
      framework: bits
      module: "@ha-bits/bit-webhook"
      label: Webhook Trigger
  - id: action
    type: bits
    data:
      framework: bits
      module: "@ha-bits/bit-http"
      label: HTTP Request
edges:
  - id: edge-1
    source: trigger
    target: action

Encoding Habit Content

To pass habit content via URL, you need to:

1. Replace newlines with \n (literal backslash-n)
2. URL-encode the result

JavaScript Example

const habitYaml = `id: my-habit
name: My Habit
nodes:
  - id: node1
    type: bits
    data:
      framework: bits
      module: "@ha-bits/bit-http"
      label: HTTP Request`;

const encoded = encodeURIComponent(habitYaml);
const viewerUrl = `https://your-domain.com/viewer/?habit=${encoded}`;

Using from Habits Base UI

The Habits Base UI includes a "Mirror Habit Link" button in the toolbar that automatically generates a viewer URL for the current habit.

Export Formats

Format	Description
interactive	Fully interactive canvas with pan, zoom, and node selection
svg	Scalable vector graphic - best for embedding in documents
png	Raster image - best for sharing on social media
html	Standalone HTML file with embedded styles

Note: The svg and png formats are rendered client-side using JavaScript (React Flow). This means the viewer URL cannot be used directly as an <img src="..."> since there is no server-side rendering. To embed these formats, you must either:

• Save the file locally, then host it
• Use an <iframe> to embed the interactive viewer
• Use a headless browser (e.g., Puppeteer) to capture the rendered output

Node Colors

Nodes are colored based on their framework and type:

Framework	Trigger Color	Action Color
script	Orange	Cyan
bits	Teal	Emerald

Node Colors Example

id: framework-colors-demo
name: Framework Colors Demo
nodes:
  # Script framework nodes (Orange trigger, Cyan action)
  - id: script-trigger
    type: bits
    data:
      framework: script
      module: script-trigger
      label: Script Trigger
  - id: script-action
    type: bits
    data:
      framework: script
      module: script-action
      label: Script Action
  # Bits framework nodes (Teal trigger, Emerald action)
  - id: bits-trigger
    type: bits
    data:
      framework: bits
      module: "@ha-bits/bit-webhook"
      label: Bits Trigger
  - id: bits-action
    type: bits
    data:
      framework: bits
      module: "@ha-bits/bit-http"
      label: Bits Action
edges:
  - id: edge-script
    source: script-trigger
    target: script-action
  - id: edge-bits
    source: bits-trigger
    target: bits-action

Embedding

You can embed the viewer in an iframe:

<iframe 
  src="/viewer/?habit=<encoded-yaml>&hideControls=true" 
  width="800" 
  height="600" 
  frameborder="0"
></iframe>

Embedded Example (Hidden Controls)

This example shows the viewer embedded with hideControls=true for a cleaner look: