Skip to content

Conversation

@cjbell
Copy link
Contributor

@cjbell cjbell commented Jan 17, 2026

Description

This PR introduces a new knock workflow preview {workflow-key} command, enabling developers to locally preview and edit their workflow templates in a browser. This feature significantly enhances the template development experience by providing:

  • Live Preview: A local server renders templates in real-time, reflecting changes made to local files.
  • Interactive Context Editing: Users can modify preview context (recipient, actor, tenant, and trigger data) directly in the browser. Trigger data is pre-populated based on the workflow's JSON schema (if available).
  • Comprehensive Email Controls: Includes HTML/plain text toggles and responsive viewport size controls (desktop, tablet, mobile) for email templates.
  • All Channel Support: Previews are supported across all Knock channel types (email, SMS, push, chat, in-App feed).
  • Telegraph Integration: The preview UI is built using Knock's Telegraph React design system for a consistent experience.

The implementation involves:

  • An Express.js server to serve the React SPA and provide API endpoints for workflow data, layouts, partials, and proxying preview requests to the Knock API.
  • A Vite-built React SPA for the frontend, leveraging Telegraph components for the entire UI.
  • A file watcher (chokidar) with debouncing to trigger live reloads on template file changes.
  • Integration with the Knock Management API's /v1/templates/preview endpoint, sending local template content, resolved layouts, and partials.
  • Inline error handling for Liquid rendering issues returned by the API.

Todos

  • None

Tasks

  • None

Screenshots

  • None

Open in Cursor Open in Web

This adds a new 'knock workflow preview' command that starts a local
preview server for workflow templates.

Features:
- Express server on port 3004 with React SPA (built with Vite)
- Uses Telegraph design system components for the UI
- Combobox to select channel steps within a workflow
- Real-time preview using Knock's template preview API
- Editable preview context: recipient, actor, tenant, and trigger data
- File watcher with debounced auto-reload on changes
- WebSocket for live reload notifications
- Email-specific features:
  - Toggle between HTML and plain text preview
  - Responsive preview modes (desktop, tablet, mobile)
  - Layout resolution for email templates
- Support for all channel types (email, SMS, push, chat, in-app feed)
- JSON schema integration for generating sample trigger data
- Optional --data-file flag to load sample data from file

Architecture:
- src/commands/workflow/preview.ts - CLI command entry point
- src/lib/preview-server/ - Express server and API routes
- src/lib/preview-server/client/ - React SPA source
- dist/preview-client/ - Built SPA (created during build)

Co-authored-by: chris <chris@knock.app>
@cursor
Copy link

cursor bot commented Jan 17, 2026

Cursor Agent can help with this pull request. Just @cursor in comments and I'll start working on changes in this branch.
Learn more about Cursor Agents

Co-authored-by: chris <chris@knock.app>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants