Skip to main content

Usage with plain JS

Starting with Tripetto is very easy when you are using plain JS. Depending on your project's requirements there are two main Tripetto components to implement:

  • Form Runner component to run forms and collect responses. It handles form execution (including complex logic and response collection), form UI and form UX. Form respondents filling out a form are working in a runner;
  • Form Builder component to create forms. It is a visual UI component that allows building smart flowing forms and surveys like flowcharts in the browser. End users who edit forms are working in the builder.

🏃 Add a form to your plain JS project​

To add a form to your project, you first need to create a form. To do so, you can use the Tripetto Studio web app or add the form builder to your project (in case you want to allow users to create forms inside your project). Next, add one of the stock runners to your project and supply the form definition of your form to it.

1️⃣ Add packages to your project​

First, you need to add the required packages to your project. To do so, run the following command:

npm install @tripetto/runner-autoscroll @tripetto/runner

2️⃣ Implement runner component​

The next step is to display the runner. It uses the run function to bootstrap the runner using a single call. This will display the form in the body element of the browser. Here's an example:

import { run } from "@tripetto/runner-autoscroll";

// Open the runner
run({
  definition: /* Supply your form definition here */,
  display: "page" // Let the runner know it runs full-page
});

Run Try on CodeSandbox

▶️ Learn more

🏗️ Add the form builder to your plain JS project​

The Tripetto builder package makes it very easy to use the builder in a plain JS project.

1️⃣ Add package to your project​

First of all, you need to add the Tripetto builder package to your project. This package is published on npm. To do so, run the following command:

npm install @tripetto/builder

2️⃣ Implement builder component​

The next step is to show the builder in your project. It uses the static open method to open the builder in a single call. This will open the builder in the body element of the browser. Here's an example:

import { Builder } from "@tripetto/builder";

// Open the builder
Builder.open();

Run Try on CodePen

▶️ Learn more