Simple text-based form generator for prototyping
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.


Simple text-based form generator for prototyping


txtof accepts standard input (e.g. via | or <) as well as an optional parameter for a template path


This code is built to run on AWS Lambda as well as through the console. You can tweak the lambda.js function contained in the project and make sure you have the handler set to lambda.handler in your Lambda config.

You can also use the Lambda environment veriable section to pass in a comma-separated template setup like below using hte key template:

<div class="container">,<div class="row">,<div class="col">,<div>,</div>,</div>,</div>,</div>,<label>{{value}}</label>,<input type="text" class="form-control" value="{{value}}"/>,<label class="form-check-label"><input type="checkbox" class="form-check-input"/>{{value}}</label>,<label class="form-check-label"><input type="radio" class="form-check-input"/>{{value}}</label>,<textarea class="form-control">{{value}}</textarea>,<button class="btn btn-primary">{{value}}</button>,<select class="form-control">{{#each value}}<option>{{this}}</option>{{/each}}</select>,<hr/>

Command examples

Running simple via pipe

echo "| (button)" | txtof

<div><span> <button>button</button><br/></span></div>

Converting data from an input txt file

txtof < example.txt

<div><span> <button>button</button><br/></span></div>

Using a custom template

txtof ~/boostrap4.tmpl < example.txt

<div class="container">
<div class="row"><div class="col"><div> <button class="btn btn-primary">button</button></div></div></div>


The template system runs on handlebars but also has some static rows. The ordering of the rows is important as each type of template maps to a specific line. Spacing is arbitrary and only for readability. Templates do not span more than one line.

A bootstrap4 example is below:

<div class="container">
    <div class="row">
        <div class="col">
<input type="text" class="form-control" value="{{value}}"/>
<label class="form-check-label"><input type="checkbox" class="form-check-input"/>{{value}}</label>
<label class="form-check-label"><input type="radio" class="form-check-input"/>{{value}}</label>
<textarea class="form-control">{{value}}</textarea>
<button class="btn btn-primary">{{value}}</button>
<select class="form-control">{{#each value}}<option>{{this}}</option>{{/each}}</select>

You can also use the environment variable template to pass in a template. In this form the template should be delimitted by a comma rather than a newline

Full example

A complete feature-set of supported features is below:

<h1>Welcome to my form!</h1>

| {What is your name?} | {Fill out options}
| [Enter a name]       | [o Yes, please] [o No, thanks]
|                      | [/ Check One] [/ Check Two]

| {Select an option}
| <Select an option..., option 1, option 2, option 3>

| {Enter some text}
| [+ How bout a textarea?]


| (Submit)


A row with a | and < and { to make sure system ignores it

| I can have a lot of text | there's some more here we | if I want | to
| in a particular column   | could get into            | if I want | to
| if I wanted to           | but we won't              | if I want | to

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi porta tincidunt diam vel imperdiet. Pellentesque tincidunt urna ac lacus semper, dapibus rutrum sem faucibus. Donec efficitur in nunc vel congue. Fusce in bibendum lacus. Vivamus nec enim metus. Maecenas facilisis pellentesque dictum. Donec porta nisl sapien, ut lobortis risus fermentum id. Maecenas egestas posuere orci, non porttitor libero porta ut. Suspendisse velit ligula, accumsan non nisi vel, scelerisque mollis libero. Sed justo enim, pretium sit amet sollicitudin sed, vulputate ac lorem.