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: "example-runner",
  template: `
    <tripetto-autoscroll-runner
      [definition]="definition"
      (onSubmit)="onSubmit($event)">
    </tripetto-autoscroll-runner>
  `
})
export class ExampleRunnerComponent {
  definition =
    /* Supply your form definition here */;

  onSubmit(instance) {
    /* Do something with the collected data */
  }
}
<html>
<body>
<script src="https://unpkg.com/tripetto-runner-foundation"></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-foundation"></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.
Standard setup, medium developer skills required.

Implement both the builder and the runner in your app.

All components in the Tripetto 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";

// 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: "example-builder",
  template: `
    <tripetto-builder
      (saved)="formSaved($event)">
    </tripetto-builder>
  `
})
export class ExampleBuilderComponent {
  // Invoked when the form is saved
  formSaved(definition) {
    // Save the form definition somewhere
  }
}
<html>
<body>
<script src="https://unpkg.com/tripetto"></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"></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";

  // 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: "example-runner",
  template: `
    <tripetto-autoscroll-runner
      [definition]="definition"
      (onSubmit)="onSubmit($event)">
    </tripetto-autoscroll-runner>
  `
})
export class ExampleRunnerComponent {
  definition =
    /* Supply your form definition here */;

  onSubmit(instance) {
    /* Do something with the collected data */
  }
}
<html>
<body>
<script src="https://unpkg.com/tripetto-runner-foundation"></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-foundation"></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.
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";
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-foundation";
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.
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

Material UI

Fluent UI

Bootstrap

These are just some examples. Anything you design can work.

Open source. Extensible. Documented.

You’re in good company. The Tripetto 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