Export Workflows to TypeScript

Own your automation code. Export any visual workflow to production-ready TypeScript that you can deploy, customize, and version control.

Try Code ExportStart with a Template
10 min readIntermediateLast updated: December 2024

5 Steps to Export Your Workflow

Go from visual workflow to production code in minutes.

  1. 1

    Open Your Workflow

    Navigate to the workflow you want to export. The workflow should be tested and working before export.

    Tips:

    • Test thoroughly before exporting
    • Document any manual configurations
    • Note environment variables needed
  2. 2

    Click Export to Code

    In the toolbar, click the Export button and select 'Export as TypeScript'. Choose your export options.

    Tips:

    • Choose between single file or modular export
    • Select which dependencies to include
    • Add comments for documentation
  3. 3

    Review Generated Code

    Preview the generated TypeScript code. Check that all steps, error handling, and types are correct.

    Tips:

    • Verify API endpoint URLs
    • Check error handling logic
    • Review type definitions
  4. 4

    Download & Customize

    Download the code package. Open in your editor, add to your project, and customize as needed.

    Tips:

    • The code is yours - modify freely
    • Add to existing projects or create new ones
    • Integrate with your CI/CD pipeline
  5. 5

    Deploy to Production

    Deploy the exported code to your infrastructure. Run as a service, serverless function, or CLI tool.

    Tips:

    • Works with any Node.js hosting
    • Deploy to Vercel, AWS Lambda, etc.
    • Run locally or on your servers

Choose Your Export Format

Select the format that best fits your deployment needs.

Single File

All workflow logic in one TypeScript file

  • Simple to use
  • Easy to share
  • Quick deployment

Best for: Small workflows, quick scripts

Modular Package

Organized into separate modules with package.json

  • Scalable structure
  • Better maintainability
  • Test-friendly

Best for: Production systems, larger workflows

Serverless Ready

Configured for AWS Lambda, Vercel, or Cloudflare Workers

  • Deploy instantly
  • Auto-scaling
  • Pay per execution

Best for: Event-driven, variable traffic

Example: Exported Workflow Code

Here's what a simple form-to-Slack workflow looks like when exported to TypeScript:

workflow.ts
// Generated workflow: Slack Notification on Form Submit
import { z } from 'zod';

// Type-safe input schema
const FormInputSchema = z.object({
  name: z.string(),
  email: z.string().email(),
  message: z.string(),
});

type FormInput = z.infer<typeof FormInputSchema>;

// Workflow configuration
const config = {
  slackWebhookUrl: process.env.SLACK_WEBHOOK_URL!,
  channel: '#notifications',
};

// Main workflow function
export async function handleFormSubmission(input: FormInput) {
  // Validate input
  const data = FormInputSchema.parse(input);

  // Format Slack message
  const message = {
    channel: config.channel,
    blocks: [
      {
        type: 'header',
        text: { type: 'plain_text', text: 'New Form Submission' }
      },
      {
        type: 'section',
        fields: [
          { type: 'mrkdwn', text: `*Name:*\n${data.name}` },
          { type: 'mrkdwn', text: `*Email:*\n${data.email}` }
        ]
      },
      {
        type: 'section',
        text: { type: 'mrkdwn', text: `*Message:*\n${data.message}` }
      }
    ]
  };

  // Send to Slack
  const response = await fetch(config.slackWebhookUrl, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(message),
  });

  if (!response.ok) {
    throw new Error(`Slack API error: ${response.status}`);
  }

  return { success: true, timestamp: new Date().toISOString() };
}

What's Included

  • Type-safe input validation with Zod schemas
  • Environment variable configuration
  • Structured error handling
  • Full TypeScript types for IDE support

What's Next?

Embed in Your App

Learn to embed workflows directly in your application

Debug Before Export

Visual debugging ensures clean exports

Frequently Asked Questions

Common questions about code export.

Ready to Own Your Automation Code?

Build visually, export to code, deploy anywhere. Full ownership, no lock-in.

Start Building FreeView Pricing