Tripetto in pieces for developers.

Pick what you need from the complete toolset with advanced form builder, form runners and countless question types. Open source, customizable, extensible and documented.

Fun fact, the Tripetto studio and Tripetto WordPress plugin are both built with this SDK.
Integrating the form builder

Build forms inside your app with the integrated builder.

The visual builder is for creating advanced forms with logic and conditional flows on a magnetic storyboard. It can easily be tightly integrated into any website or app and works smoothly in mainstream browsers; mouse, touch or pen. Form structures are stored in a JSON-formatted form definition.

Screenshot of the form builder.
// Import the builder JavaScript function
import { Builder } from "@tripetto/builder";

// Start the builder
const builder =;

// Listen for the save event
builder.onSave = (definition) => {
  // Save the form definition somewhere
// Import the builder React component
import { TripettoBuilder } from "@tripetto/builder/react";

// Drop the builder component in your React app
<TripettoBuilder onSave={(definition) => {
  // Save the form definition somewhere
}} />
  selector: "app-root",
  template: `
export class AppComponent {
  // Invoked when the form is saved
  formSaved(definition) {
    // Save the form definition somewhere
<script src=""></script>
  // Start the builder
  var builder =;

  // Listen for the save event
  builder.onSave = function(definition) {
    // Save the form definition somewhere
<script src=""></script>
  // Start the builder
  var builder =;

  // Listen for the save event
  builder.onSave = function(definition) {
    // Save the form definition somewhere

Visual storyboard

Build forms like flowcharts. The magnetic storyboard shows you what goes where and actively aligns your flow.

About the visual builder

Drag and drop

Drag and drop any part where you need it on the magnetic storyboard, which will visibly guide you along the way.

How to arrange things

Versatile blocks

Comes with all question types you need for forms, surveys, quizzes and more. Including real-time, automatic actions.

About question blocks

Advanced logic

Use powerful logic features and get conversational to increase completion rates and reduce drop-offs. Better data!

About conversational logic
Embedding the form runners

Deploy forms in your app with the embedded runner.

The runner is for deploying forms in websites and applications. It turns a form definition into an executable program; a finite state machine that handles the complex logic and response collection during form execution. Choose any of our stock runners for your project.

Form faces

Pick the Typeform-like, chat, or classic form experience, and then fully customize it for the optimal fit with your audience.

About convertible form faces

Styling included

Tailor things with customizable fonts, colors, buttons, labels, backgrounds, input controls, and much more.

How to style things

Finite state machine

The runner is a finite state machine that handles form logic and response collection during form execution.

About the runner engine

Custom runners

The runner engine is headless and built for developers to develop their own custom UI and UX layers on top of.

How to build a runner
Customizing question blocks

The development kit is thoroughly customizable.

The development kit also comes with a rich set of customizable, open source question types for developers to use out of the box or enhance for use in the Tripetto builder and runners. Also, developers can create original question blocks from scratch.

Icon representing stock blocks.

Use or customize our stock blocks.

Blocks make up the forms created in the builder and executed by the runner. Use whichever of our stock blocks, and even customize them to fit your needs.

  • Icon representing stock question blocks.

    Question Blocks

    Ask for respondent input with all the regular question types.
  • Icon representing stock action blocks.

    Action Blocks

    Perform real-time actions based on respondent inputs.
  • Icon representing stock condition blocks.

    Condition Blocks

    Contain logic and are used to define branching conditions.

Develop your own custom blocks.

You can extend Tripetto with more question types and functionality by building custom blocks for anything.

  • Icon representing a custom address block.


  • Icon representing a custom API block.


  • Icon representing a custom timer block.


  • Icon representing more custom blocks.


TypeScript typings included.

Tripetto contains type declarations and supports TypeScript out of the box.

When working with the SDK, only your imagination is the limit.
Get a full-fledged form solution going in minutes

The SDK is flexible.Pick what you need, and customize if you want.

Explore Solutions