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 { Builder } from "@tripetto/builder";

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

// Listen for the save event
builder.onSave = (definition) => {
  // Save the form definition somewhere
};
// 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
  }
}
<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>
<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 type="module">
  import { Builder } from
    "https://cdn.skypack.dev/@tripetto/builder";

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

  // Listen for the save event
  builder.onSave = (definition) => {
    // Save the form definition somewhere
  };
</script>
</body>
</html>
Build forms like flowcharts on the storyboard, which actively organizes what you create. This makes designing highly conversational flows clean, fast and fun. Learn more about the builder’s capabilities.
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.

Not all forms need the same appearance. Choose between totally different form experiences to get the optimal look and feel for the occasion. Learn more about the so-called form faces.
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.

    Address

  • Icon representing a custom API block.

    API's

  • Icon representing a custom timer block.

    Timer

  • Icon representing more custom blocks.

    More

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