Template editing preview

[cjbell]

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

---

 

[cursor]

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}