Mix what you need, and how you need it.

What you need from the SDK’s extensive toolset depends on how far you want to take things in your website or app. You won’t always need everything.

Hybrid setup, basic developer skills required.

Build forms in our studio, and only use the runner in your app.

Tripetto’s stock runners are for deploying forms in websites and applications. They run forms with stock blocks from our free, online Tripetto studio. So, if you don’t need the builder inside your website or app, this hybrid solution is your best and fastest fit.

Runner implementation

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

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

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

<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(instance) {
      /* Do something with the collected data */
    }
  });
</script>
</body>
</html>

<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(instance) {
      /* Do something with the collected data */
    }
  });
</script>
</body>
</html>

Hybrid Setup

Building Forms
Build forms in the free online studio at tripetto.app. No need to implement the builder into your website or application.

Running Forms
Implement any of the stock runners into your website or application to run forms created in the studio. Implementing the runners is a matter of minutes and is possible using plain JS, React, Angular and HTML5.

Available Blocks
Build and run forms with stock blocks only. It’s not possible to customize blocks or develop your own blocks, because of the use of the studio and implementation of stock runners.

Customizations
Customizing the builder, runners and blocks is not possible in this setup.
Learn how to implement the hybrid setup
Standard setup, medium developer skills required.

Implement both the builder and the runner in your app.

All components in the FormBuilder SDK can be neatly integrated fully into websites and applications. So, if you need to be fully independent of any Tripetto infrastructure and want to have total control, then implementing both the builder and runner is the way to go.

Builder implementation

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>

Runner implementation

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

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

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

<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(instance) {
      /* Do something with the collected data */
    }
  });
</script>
</body>
</html>

<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(instance) {
      /* Do something with the collected data */
    }
  });
</script>
</body>
</html>

Standard Setup

Building Forms
Implement the builder into your website or application to create forms. Implementing the builder is usually a matter of minutes and is possible using plain JS, React, Angular and HTML5.

Running Forms
Implement any of the stock runners into your website or application to run forms created in builder. Implementing the runners is a matter of minutes and is possible using plain JS, React, Angular and HTML5.

Available Blocks
Build and run forms with stock blocks, customize these blocks, or develop your own original blocks. Because of the implementation of both the builder and stock runners inside your project, it’s possible to customize and develop blocks.

Customizations
Customizing and developing blocks is possible in this setup.
Learn how to implement the standard setup
Custom setup, advanced developer skills required.

Boost your app with custom question blocks.

With both the builder and runner implemented you can start to customize our question blocks, or enhance an application with your own to unlock API's and other amazing things. So, if you really need to bend or extend things, the custom setup is ideal for you.

Builder part of a custom block

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
}

Runner part of a custom block

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() {}
}

Custom Setup

Building Forms
Implement the builder into your website or application to create forms. Implementing the builder is usually a matter of minutes and is possible using plain JS, React, Angular and HTML5.

Running Forms
Implement any of the stock runners into your website or application to run forms created in builder. Implementing the runners is a matter of minutes and is possible using plain JS, React, Angular and HTML5.

Available Blocks
Build and run forms with stock blocks, customize these blocks, or develop your own original blocks. Because of the implementation of both the builder and stock runners inside your project, it’s possible to customize and develop blocks.

Customizations
Customizing and developing blocks is possible in this setup.
Learn how to implement the custom setup
A-Team setup, master developer skills required.

Equip the headless runner engine with custom UI and UX.

The form runner smartly handles UI, complex logic and response collection during form execution. Its engine is headless and just begging for A-Team devs to wield its powers with custom UI and UX layers. There's a learning curve. But hey, no pain no gain!

Custom UI & UX

Custom runner with custom UI & UX

Material UI

Custom runner with Material UI
Custom runner with Fluent UI

Fluent UI

Custom runner with Bootstrap

Bootstrap

These are just some examples. Anything you design can work.
Learn how to implement any custom UI and UX

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.

Get a full-fledged form solution going in minutes

The SDK will fit you.Learn how exactly.

See What Fits You