| 1 | # <a href="https://tripetto.com/"><img src="https://unpkg.com/tripetto/assets/banner.svg" alt="Tripetto"></a>
|
| 2 |
|
| 3 | Tripetto is a full-fledged form kit. Rapidly build and run smart flowing forms and surveys. Drop the kit in your codebase and use all of it or just the parts you need. The visual [**builder**](https://www.npmjs.com/package/tripetto) is for form building, and the [**runners**](https://www.npmjs.com/package/tripetto-runner-foundation) are for running those forms in different UI variants. It is entirely extendible and customizable. Anyone can build their own building [**blocks**](https://docs.tripetto.com/guide/blocks) (e.g., question types) or runner UI's.
|
| 4 |
|
| 5 | # Builder package
|
| 6 | [](https://www.npmjs.com/package/tripetto)
|
| 7 | [](https://www.npmjs.com/package/tripetto)
|
| 8 | [](https://unpkg.com/browse/tripetto/types/tripetto.d.ts)
|
| 9 | [](https://docs.tripetto.com/guide/builder/)
|
| 10 | [](https://twitter.com/tripetto)
|
| 11 |
|
| 12 | This package contains:
|
| 13 | - A CLI tool for running the form builder stand-alone from your command line - [Docs](https://docs.tripetto.com/guide/builder/#cli) - [Quickstart](#get-started)
|
| 14 | - A library to integrate the form builder in your projects - [Docs](https://docs.tripetto.com/guide/builder/#library)
|
| 15 | - Typings to develop custom building blocks for the form builder using TypeScript - [Docs](https://docs.tripetto.com/guide/blocks/) - [Boilerplate](https://gitlab.com/tripetto/blocks/boilerplate)
|
| 16 |
|
| 17 | # Purpose
|
| 18 | You use the visual form builder to create and edit smart forms with logic and conditional flows in 2D on a self-organizing drawing board. The form builder can run as a stand-alone CLI tool or be tightly integrated in your software. It works in any modern browser and with mouse, touch or pen. The complete structure of a form is stored in a `JSON` format; the [form definition](https://docs.tripetto.com/guide/builder/#definitions). Also, you decide which form building *blocks* (e.g., question types) you want to use in the form builder and runners. We offer a default set to choose from, but you can also develop your own.
|
| 19 |
|
| 20 | # Demo
|
| 21 | [](https://tripetto.gitlab.io/runners/autoscroll/)
|
| 22 |
|
| 23 | [](https://s.codepen.io/tripetto/debug/oqPjmG/mVkbGEydjLPM)
|
| 24 |
|
| 25 | # Get started
|
| 26 |
|
| 27 | ## Use as CLI tool
|
| 28 | The CLI version of the form builder is an easy to use command line tool that allows you to create and edit form definition files stored locally on your disk. This is ideal for developers implementing a runner in a website or application, or when building and testing custom blocks for Tripetto. Install it using [npm](https://www.npmjs.com/) (you need [Node.js](https://nodejs.org/en/)). Enter the following command in your terminal/command prompt:
|
| 29 | ```bash
|
| 30 | $ npm install tripetto -g
|
| 31 | ```
|
| 32 | And start using the CLI tool for editing a [form definition](https://docs.tripetto.com/guide/builder/#definitions) file (the form builder will run in your browser at `localhost:3333`):
|
| 33 | ```bash
|
| 34 | $ tripetto demo.json
|
| 35 | ```
|
| 36 | There are some additional command line options you can use. These are listed [here](https://docs.tripetto.com/guide/builder/#cli-options).
|
| 37 |
|
| 38 | ## Integrate in your project
|
| 39 | When you want to seamlessly integrate the Tripetto visual form builder into your own project, you need this library to do so. Implementation is very easy. First add the form builder package to your project's dependencies:
|
| 40 | ```bash
|
| 41 | $ npm install tripetto --save
|
| 42 | ```
|
| 43 | Next, import the appropriate symbols into your application (if you use TypeScript, the type information should work out-of-the-box) and then you can invoke the form builder with a simple command:
|
| 44 | ```typescript
|
| 45 | import { Builder } from "tripetto";
|
| 46 |
|
| 47 | // Create and open a form builder instance
|
| 48 | Builder.open();
|
| 49 | ```
|
| 50 | Take a look at the library documentation [here](https://docs.tripetto.com/guide/builder/#library) to learn more.
|
| 51 |
|
| 52 | # Documentation
|
| 53 | The complete documentation can be found at [docs.tripetto.com](https://docs.tripetto.com).
|
| 54 |
|
| 55 | Detailed form **builder** documentation is found [here](https://docs.tripetto.com/guide/builder/).
|
| 56 |
|
| 57 | More about the **runners** is available [here](https://docs.tripetto.com/guide/runners/).
|
| 58 |
|
| 59 | If you want to develop your own building **blocks**, read more [here](https://docs.tripetto.com/guide/blocks/) or start with our [boilerplate](https://gitlab.com/tripetto/blocks/boilerplate).
|
| 60 |
|
| 61 | # Support
|
| 62 | Run into issues or bugs? Report them [here](https://gitlab.com/tripetto/builder/issues) and we'll look into them.
|
| 63 |
|
| 64 | For general support contact us at [support@tripetto.com](mailto:support@tripetto.com). We're more than happy to assist you.
|
| 65 |
|
| 66 | # License
|
| 67 | [](https://creativecommons.org/licenses/by-nc-nd/4.0/legalcode)
|
| 68 |
|
| 69 | For detailed license information, please read the [pricing](https://tripetto.com/pricing) page on our website.
|
| 70 |
|
| 71 | # Contributors
|
| 72 | - [Hisam A Fahri](https://gitlab.com/hisamafahri) (Indonesian translation)
|
| 73 | - [Krzysztof Kamiński](https://gitlab.com/kriskaminski) (Polish translation)
|
| 74 |
|
| 75 | # Community
|
| 76 | We hope other enthusiasts will also start to develop and share runners and blocks for Tripetto. We have a [repository](https://github.com/tripetto/community) where we collect a list of community driven blocks and runners. Did you build something? Submit a [PR](https://github.com/tripetto/community/pulls) and add yours to the list. We appreciate it!
|
| 77 |
|
| 78 | # About us
|
| 79 | If you want to learn more about Tripetto or contribute in any way, visit us at [Tripetto.com](https://tripetto.com/).
|