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.

Form Builder
Form Runners
Question Blocks

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.

// Import the builder JavaScript function
import { Builder } from "@tripetto/builder";

// Start the builder
const builder = Builder.open();

// 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
}} />

@Component({
  selector: "app-root",
  template: `
    <tripetto-builder
      (onSave)="formSaved($event)">
    </tripetto-builder>
  `
})
export class AppComponent {
  // Invoked when the form is saved
  formSaved(definition) {
    // Save the form definition somewhere
  }
}

jsDelivr
unpkg

<html>
<body>
<script src="https://cdn.jsdelivr.net/npm/@tripetto/builder"></script>
<script>
  // Start the builder
  var builder = Tripetto.Builder.open();

  // Listen for the save event
  builder.onSave = function(definition) {
    // Save the form definition somewhere
  };
</script>
</body>
</html>

<html>
<body>
<script src="https://unpkg.com/@tripetto/builder"></script>
<script>
  // Start the builder
  var builder = Tripetto.Builder.open();

  // Listen for the save event
  builder.onSave = function(definition) {
    // Save the form definition somewhere
  };
</script>
</body>
</html>

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

Learn how to implement the builder

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.

Autoscroll Face

Fluently presents one question at a time.
Chat Face

Presents all questions and answers as a chat.
Classic Face

Presents question fields in a traditional format.

Screenshot of a fitness registration form in the autoscroll form face, shown on a tablet and a mobile phone.

// Import the runner JavaScript function
import { run } from "@tripetto/runner-autoscroll";

// Start the runner
run({
  definition:
    /* Supply your form definition here */,
  onSubmit: (form) => {
    /* Do something with the collected data */
  }
});

// Import the runner component
import { AutoscrollRunner } from "@tripetto/runner-autoscroll";

// Drop the runner component in your React app
<AutoscrollRunner
  definition={
    /* Supply your form definition here */
  }
  onSubmit={(form) => {
    /* Do something with the collected data */
  }}
/>

@Component({
  selector: "app-root",
  template: `
    <tripetto-runner-autoscroll
      [definition]="definition"
      (onSubmit)="onSubmit($event)">
    </tripetto-runner-autoscroll>
  `
})
export class AppComponent {
  definition =
    /* Supply your form definition here */;

  onSubmit(form) {
    /* Do something with the collected data */
  }
}

jsDelivr
unpkg

<html>
<body>
<script src="https://cdn.jsdelivr.net/npm/@tripetto/runner"></script>
<script src="https://cdn.jsdelivr.net/npm/@tripetto/runner-autoscroll"></script>
<script>
  // Start the runner
  TripettoAutoscroll.run({
    definition: /* Supply your form definition here */,
    onSubmit: function(form) {
      /* Do something with the collected data */
    }
  });
</script>
</body>
</html>

<html>
<body>
<script src="https://unpkg.com/@tripetto/runner"></script>
<script src="https://unpkg.com/@tripetto/runner-autoscroll"></script>
<script>
  // Start the runner
  TripettoAutoscroll.run({
    definition: /* Supply your form definition here */,
    onSubmit: function(form) {
      /* Do something with the collected data */
    }
  });
</script>
</body>
</html>

Screenshot of a fitness registration form in the chat form face, shown on a tablet and a mobile phone.

// Import the runner JavaScript function
import { run } from "@tripetto/runner-chat";

// Start the runner
run({
  definition:
    /* Supply your form definition here */,
  onSubmit: (form) => {
    /* Do something with the collected data */
  }
});

// Import the runner component
import { ChatRunner } from "@tripetto/runner-chat";

// Drop the runner component in your React app
<ChatRunner
  definition={
    /* Supply your form definition here */
  }
  onSubmit={(form) => {
    /* Do something with the collected data */
  }}
/>

@Component({
  selector: "app-root",
  template: `
    <tripetto-runner-chat
      [definition]="definition"
      (onSubmit)="onSubmit($event)">
    </tripetto-runner-chat>
  `
})
export class AppComponent {
  definition =
    /* Supply your form definition here */;

  onSubmit(form) {
    /* Do something with the collected data */
  }
}

jsDelivr
unpkg

<html>
<body>
<script src="https://cdn.jsdelivr.net/npm/@tripetto/runner"></script>
<script src="https://cdn.jsdelivr.net/npm/@tripetto/runner-chat"></script>
<script>
  // Start the runner
  TripettoChat.run({
    definition: /* Supply your form definition here */,
    onSubmit: function(form) {
      /* Do something with the collected data */
    }
  });
</script>
</body>
</html>

<html>
<body>
<script src="https://unpkg.com/@tripetto/runner"></script>
<script src="https://unpkg.com/@tripetto/runner-chat"></script>
<script>
  // Start the runner
  TripettoChat.run({
    definition: /* Supply your form definition here */,
    onSubmit: function(form) {
      /* Do something with the collected data */
    }
  });
</script>
</body>
</html>

Screenshot of a fitness registration form in the classic form face, shown on a tablet and a mobile phone.

// Import the runner JavaScript function
import { run } from "@tripetto/runner-classic";

// Start the runner
run({
  definition:
    /* Supply your form definition here */,
  onSubmit: (form) => {
    /* Do something with the collected data */
  }
});

// Import the runner component
import { ClassicRunner } from "@tripetto/runner-classic";

// Drop the runner component in your React app
<ClassicRunner
  definition={
    /* Supply your form definition here */
  }
  onSubmit={(form) => {
    /* Do something with the collected data */
  }}
/>

@Component({
  selector: "app-root",
  template: `
    <tripetto-runner-classic
      [definition]="definition"
      (onSubmit)="onSubmit($event)">
    </tripetto-runner-classic>
  `
})
export class AppComponent {
  definition =
    /* Supply your form definition here */;

  onSubmit(form) {
    /* Do something with the collected data */
  }
}

jsDelivr
unpkg

<html>
<body>
<script src="https://cdn.jsdelivr.net/npm/@tripetto/runner"></script>
<script src="https://cdn.jsdelivr.net/npm/@tripetto/runner-classic"></script>
<script>
  // Start the runner
  TripettoClassic.run({
    definition: /* Supply your form definition here */,
    onSubmit: function(form) {
      /* Do something with the collected data */
    }
  });
</script>
</body>
</html>

<html>
<body>
<script src="https://unpkg.com/@tripetto/runner"></script>
<script src="https://unpkg.com/@tripetto/runner-classic"></script>
<script>
  // Start the runner
  TripettoClassic.run({
    definition: /* Supply your form definition here */,
    onSubmit: function(form) {
      /* Do something with the collected data */
    }
  });
</script>
</body>
</html>

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

Learn how to implement runners

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.

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.

Question Blocks
Ask for respondent input with all the regular question types.
Action Blocks
Perform real-time actions based on respondent inputs.
Condition Blocks
Contain logic and are used to define branching conditions.