Not a developer?

Instantly equip your site or app with a form solution.

Tripetto’s FormBuilder SDK contains fully customizable components for equipping apps and websites with a comprehensive form building and deploying solution.

Equip your website or app with a complete form solution in no-time!

The form kit to fit.

The SDK's parts for form building and deployment are designed for quick embedding in straightforward cases as well as deep integration into advanced applications.

Form Builder

The intelligent storyboard is for building forms like flowcharts with powerful logic flows.
Form Runners

Runners execute forms created in the builder and handle UX, logic and response delivery.
Question Blocks

Customize and even develop question types to enhance the forms in your app or website.

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

Screenshot of a customer satisfaction form in the autoscroll form face, shown on a tablet.

// 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 available question blocks in the form builder.

Builder
Runner

import { tripetto, NodeBlock } from "@tripetto/builder";
import icon from "./icon.svg";

@tripetto({
  type: "node",
  identifier: "text-input",
  label: "Text input",
  icon
})
class TextInputBuilderBlock extends NodeBlock {
  // Block implementation for builder here
}

import { tripetto, NodeBlock }
  from "@tripetto/runner";
import { namespace, IAutoscrollRendering }
  from "@tripetto/runner-autoscroll";

@tripetto({
  type: "node",
  namespace,
  identifier: "text-input",
})
class TextInputRunnerBlock extends NodeBlock
  implements IAutoscrollRendering {
  // Render the text input block UI
  render() {}
}

How the FormBuilder SDK works

Open source. Extensible. Documented.

You’re in good company. The FormBuilder SDK’s components are used and trusted by Fortune 500 companies around the globe.

The SDK works in any environment running JavaScript.

The FormBuilder SDK contains solely client-side components running in the context of the user's browser, without relying on a specific back-end. In other words, everything works in any client-side environment that supports JavaScript.

How to implement SDK components

The SDK components are pure JavaScript (VanillaJS). They run in any client-side environment that supports JavaScript. Just like that.

Tripetto and Javascript

The SDK components are also usable in React. The docs include hands-on guides for implementing Tripetto in a React app.

Tripetto for React

Prefer Angular? No problem. The docs cover step-by-step instructions to easily use the SDK components in an Angular app in no-time.

Tripetto for Angular

Still feeling HTML? We got you! Just pull in from a CDN what you need from the SDK for your project, and off you go! Literally in just minutes.

Tripetto and HTML5

Tripetto ❤️ TypeScript

All FormBuilder SDK packages include type declarations and support TypeScript out of the box.

Exclusively self-host things where and how you want.

The SDK comes without predefined storage solutions. You decide how and where forms and data are stored. Without any dependencies on unwanted infrastructure. Nothing ever touches any other platform, unless you let it.

How to self-host the SDK and data

Every part of Tripetto neatly packed into your application.

The SDK's parts for form creation and deployment are designed for quick embedding in straightforward cases as well as deep integration into advanced applications.

Full-fledged Form Builder

Build smart forms and surveys like flowcharts on the magnetic drag-and-drop storyboard.

Powerful Form Runners

Let the all-in-one runner execute your forms and handle UI rendering, UX, logic and response delivery.

Customizable Question Blocks

Deeply customize things for the optimal integration into your website or application.

Trusted, richly documented tech.

You’re in good company. The SDK’s components are used and trusted by Fortune 500 companies.

TypeScript typings included.

All SDK packages include type declarations and support TypeScript out of the box.

Learn more about the SDK components

Get a full-fledged form solution going in minutes

The SDK is calling you.There’s docs, examples and live code to help you.

Get Started Now