launch

Patches may optionally define a launch function for HTML patches that will be displayed in the HTML view/split view. When both launch and main are defined, launch takes precedence and will be called instead of main.

The launch function is specifically designed for patches that return HTML content. When a patch with launch() is executed via the launch API, it must return a SupHTML object. Other return types will result in an error.

Usage

// launch() must return HTML content
function launch() {
  return sup.html("<div>Hello World</div>");
}

// If launch() is defined, main() will not be called
function main() {
  return "This won't be executed";
}

Examples

// Basic HTML
function launch() {
  return sup.html("<div>Hello World</div>");
}

// HTML with dimensions
function launch() {
  return sup.html("<div>My App</div>", {
    width: 800,
    height: 600
  });
}

// HTML with state for interactivity
function launch() {
  return sup.html("<div>Click count: <span id='count'>0</span></div>", {
    state: { count: 0 }
  });
}

// HTML with Tailwind CSS
function launch() {
  return sup.html(`
    <div class="p-4 bg-blue-500 text-white rounded">
      Styled with Tailwind
    </div>
  `, {
    tailwind: true
  });
}

// HTML as an image (screenshot)
function launch() {
  return sup.html("<div>This will be rendered as an image</div>", {
    type: 'image',
    width: 1200,
    height: 800
  });
}

// HTML as a video
function launch() {
  return sup.html("<div>Animated content</div>", {
    type: 'video',
    duration: 5000,
    width: 1920,
    height: 1080
  });
}

// HTML with callbacks for server-side interaction
function handleQuery(event) {
  return sup.ai.prompt(`Answer: ${event.value}`);
}

function launch() {
  return sup.html(sup.asset("myApp"), {
    callbacks: ["handleQuery"]
  });
}
// Client-side JS can call: await window.sup.exec("handleQuery", "question")

When to use launch()

Use launch() when you want to:

• Create HTML patches that will be displayed instantly in the HTML view/split view
• Build interactive web applications that run in Sup
• Create patches that are specifically designed to be “launched” rather than displayed inline in chat

Important: launch() is specifically for HTML content. Patches with launch() must return a SupHTML object. Returning other types (strings, images, etc.) will result in an error when the patch is launched.

Return type

launch() must return a SupHTML object. This is enforced by the client when patches are launched via the launch API.

See the SupHTML documentation for all available options and features.