Skip to main content

Implement builder using plain JS

You can implement the builder using plain JS.

✅ 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

📄 Basic implementation​

This code example shows the minimal code required to show the builder. 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.

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

// Open the builder
Builder.open();

Run Try on CodePen

👩‍💻 Use a custom HTML element​

By default, the builder opens in the body element of the HTML document. If you want to use a custom HTML element for the builder, you should supply the desired element to the element property as shown in the example below:

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

// Create a new builder instance
const builder = new Builder({
    element: document.getElementById("CustomElement")
});

// Open the builder
builder.open();

Run Try on CodePen

caution

When you specify a custom HTML element for the builder, you need to make sure to set the position style attribute of that element to absolute, relative, fixed or sticky. Otherwise it is possible that the builder is displayed outside of the element boundaries.

📦 Loading blocks​

By default, the builder does not contain any blocks (question types). So, you need to load the desired blocks (more about making blocks available to the builder here). The following example shows how to load a set of stock blocks (blocks built and maintained by the Tripetto team). The first step is to add these packages to your project:

npm install @tripetto/block-calculator @tripetto/block-checkbox @tripetto/block-checkboxes @tripetto/block-date @tripetto/block-device @tripetto/block-dropdown @tripetto/block-email @tripetto/block-error @tripetto/block-evaluate @tripetto/block-file-upload @tripetto/block-hidden-field @tripetto/block-mailer @tripetto/block-matrix @tripetto/block-multi-select @tripetto/block-multiple-choice @tripetto/block-number @tripetto/block-paragraph @tripetto/block-password @tripetto/block-phone-number @tripetto/block-picture-choice @tripetto/block-radiobuttons @tripetto/block-ranking @tripetto/block-rating @tripetto/block-regex @tripetto/block-scale @tripetto/block-setter @tripetto/block-signature @tripetto/block-statement @tripetto/block-stop @tripetto/block-text @tripetto/block-textarea @tripetto/block-url @tripetto/block-variable @tripetto/block-yes-no

Next, add imports to your code to load the blocks (the blocks self-register and become available to the builder):

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

// Load the stock blocks
import "@tripetto/block-calculator";
import "@tripetto/block-checkbox";
import "@tripetto/block-checkboxes";
import "@tripetto/block-date";
import "@tripetto/block-device";
import "@tripetto/block-dropdown";
import "@tripetto/block-email";
import "@tripetto/block-error";
import "@tripetto/block-evaluate";
import "@tripetto/block-file-upload";
import "@tripetto/block-hidden-field";
import "@tripetto/block-mailer";
import "@tripetto/block-matrix";
import "@tripetto/block-multi-select";
import "@tripetto/block-multiple-choice";
import "@tripetto/block-number";
import "@tripetto/block-paragraph";
import "@tripetto/block-password";
import "@tripetto/block-phone-number";
import "@tripetto/block-picture-choice";
import "@tripetto/block-radiobuttons";
import "@tripetto/block-ranking";
import "@tripetto/block-rating";
import "@tripetto/block-regex";
import "@tripetto/block-scale";
import "@tripetto/block-setter";
import "@tripetto/block-signature";
import "@tripetto/block-statement";
import "@tripetto/block-stop";
import "@tripetto/block-text";
import "@tripetto/block-textarea";
import "@tripetto/block-url";
import "@tripetto/block-variable";
import "@tripetto/block-yes-no";

// Open the builder
Builder.open();

Run Try on CodePen

tip

The example above uses static imports for adding the stock block packages. It results in a code bundle that includes all the imported blocks. There is also an option to dynamically load blocks. That preserves JS bundle bloat. Please read the Block loading guide for more information about loading blocks.

⏭️ Up next​

Now you've got the basic implementation for the builder up and running, dive deeper into the following topics:

Loading and saving​

Miscellaneous​

Customization​