Pick what you need from the complete toolset with advanced form builder, form runners and countless question types. Open source, customizable, extensible and documented.
Fun fact, the Tripetto studio and Tripetto WordPress plugin are both built with this SDK.The visual builder is for creating advanced forms with logic and conditional flows on a magnetic storyboard. It can easily be tightly integrated into any website or app and works smoothly in mainstream browsers; mouse, touch or pen. Form structures are stored in a JSON-formatted form definition.
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>
The runner is for deploying forms in websites and applications. It turns a form definition into an executable program; a finite state machine that handles the complex logic and response collection during form execution. Choose any of our stock runners for your project.
Fluently presents one question at a time.
Presents all questions and answers as a chat.
Presents question fields in a traditional format.
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>
import { run } from "@tripetto/runner-chat";
// 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
<ChatRunner
definition={
/* Supply your form definition here */
}
onSubmit={(instance) => {
/* Do something with the collected data */
}}
/>
@Component({
selector: "app-root",
template: `
<tripetto-runner-chat
[definition]="definition"
(onSubmit)="onSubmit($event)">
</tripetto-runner-chat>
`
})
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-chat"></script>
<script>
// Start the runner
TripettoChat.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-chat"></script>
<script>
// Start the runner
TripettoChat.run({
definition: /* Supply your form definition here */,
onSubmit: function(instance) {
/* Do something with the collected data */
}
});
</script>
</body>
</html>
import { run } from "@tripetto/runner-classic";
// 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
<ClassicRunner
definition={
/* Supply your form definition here */
}
onSubmit={(instance) => {
/* Do something with the collected data */
}}
/>
@Component({
selector: "app-root",
template: `
<tripetto-runner-classic
[definition]="definition"
(onSubmit)="onSubmit($event)">
</tripetto-runner-classic>
`
})
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-classic"></script>
<script>
// Start the runner
TripettoClassic.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-classic"></script>
<script>
// Start the runner
TripettoClassic.run({
definition: /* Supply your form definition here */,
onSubmit: function(instance) {
/* Do something with the collected data */
}
});
</script>
</body>
</html>
The development kit also comes with a rich set of customizable, open source question types for developers to use out of the box or enhance for use in the Tripetto builder and runners. Also, developers can create original question blocks from scratch.
Blocks make up the forms created in the builder and executed by the runner. Use whichever of our stock blocks, and even customize them to fit your needs.
You can extend Tripetto with more question types and functionality by building custom blocks for anything.
Tripetto contains type declarations and supports TypeScript out of the box.