SDK Solutions - Tripetto SDK

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 */
  }
}

unpkg
jsDelivr

<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.

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 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 */
  }
}

unpkg
jsDelivr

<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.

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";
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.

Learn how to implement the custom setup

Mix what you need, and how you need it.

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

Runner implementation

Hybrid Setup

Building Forms

Running Forms

Available Blocks

Customizations

Implement both the builder and the runner in your app.

Builder implementation

Runner implementation

Standard Setup

Building Forms

Running Forms

Available Blocks

Customizations

Boost your app with custom question blocks.

Builder part of a custom block

Runner part of a custom block

Custom Setup

Building Forms

Running Forms

Available Blocks

Customizations

Equip the headless runner engine with custom UI and UX.

Custom UI & UX

Material UI

Fluent UI

Bootstrap

Open source. Extensible. Documented.

The SDK will fit you.Learn how exactly.