We celebrated the launch of our FormBuilder SDK on Product Hunt in 2024. Thanks for all your upvotes and kind messages.
The SDK's parts for form building and deployment are designed for quick embedding in straightforward cases as well as deep integration into advanced applications.
The intelligent storyboard is for building forms like flowcharts with powerful logic flows.
Runners execute forms created in the builder and handle UX, logic and response delivery.
Customize and even develop question types to enhance the forms in your app or website.
// Import the builder JavaScript function
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
};
// Import the builder React component
import { TripettoBuilder } from "@tripetto/builder/react";
// 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://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 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>
// Import the runner JavaScript function
import { run } from "@tripetto/runner-autoscroll";
// Start the runner
run({
definition:
/* Supply your form definition here */,
onSubmit: (form) => {
/* Do something with the collected data */
}
});
// Import the runner component
import { AutoscrollRunner } from "@tripetto/runner-autoscroll";
// Drop the runner component in your React app
<AutoscrollRunner
definition={
/* Supply your form definition here */
}
onSubmit={(form) => {
/* 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(form) {
/* Do something with the collected data */
}
}
<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(form) {
/* Do something with the collected data */
}
});
</script>
</body>
</html>
<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(form) {
/* Do something with the collected data */
}
});
</script>
</body>
</html>
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
}
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() {}
}
The FormBuilder SDK contains solely client-side components running in the context of the user's browser, without relying on a specific back-end. In other words, everything works in any client-side environment that supports JavaScript.
The SDK components are pure JavaScript (VanillaJS). They run in any client-side environment that supports JavaScript. Just like that.
Tripetto and JavascriptThe SDK components are also usable in React. The docs include hands-on guides for implementing Tripetto in a React app.
Tripetto for ReactPrefer Angular? No problem. The docs cover step-by-step instructions to easily use the SDK components in an Angular app in no-time.
Tripetto for AngularStill feeling HTML? We got you! Just pull in from a CDN what you need from the SDK for your project, and off you go! Literally in just minutes.
Tripetto and HTML5The SDK comes without predefined storage solutions. You decide how and where forms and data are stored. Without any dependencies on unwanted infrastructure. Nothing ever touches any other platform, unless you let it.
The SDK's parts for form creation and deployment are designed for quick embedding in straightforward cases as well as deep integration into advanced applications.
Build smart forms and surveys like flowcharts on the magnetic drag-and-drop storyboard.
Let the all-in-one runner execute your forms and handle UI rendering, UX, logic and response delivery.
Deeply customize things for the optimal integration into your website or application.
You’re in good company. The SDK’s components are used and trusted by Fortune 500 companies.
All SDK packages include type declarations and support TypeScript out of the box.
