1. General
  2. Options
  3. Editor
  4. Templator
  5. Variables
  6. Structure
  7. Loops
  8. Helpers
  9. Imports

General Information

This is a basic editor and templator made to help users customize their codes a bit faster.

This site does not save any data or use any trackers. All data that's 'saved' is saved to your browser's local storage. I encourage you to download anything you might have created here, just in case your browser storage is wiped for whatever reason.

As of May 2025, you'll no longer be able to edit CSS with this editor.

Site Options

Site Theme

Color of the site.

Editor Theme

Color of the code editor.

Editor Type

Changes the area your code will render in.

  • Base - Blank page
  • Profile - User profile page
  • Thread - Forum thread (inital post)
  • Bulletin - Bulletin page
Auto Save

Will autosave your progress every x amount of minutes.

Save On Edit

If you find the page is crashing or too slow, turn this off and either save manually or use the auto save function.

Import Google Sheet

Import a Google Sheet with character information. You'll be able to import said character information into your template.

In depth information about this can be found below.

Editor

Editor is just for editing HTML while using Toyhou.se CSS.

Please note that Toyhou.se has its own HTML purifier AND CSS whitelist. Wrongly configured HTML can break and some CSS properties might not show up when used on Toyhou.se.

As of May 2025, the editor no longer shares the same storage information with the templator - so you can edit code while editing a different template code at the same time.

Templator

As of Jan 2026, the templator has received a another major overhaul. It now uses Handlebars.js, meaning you can now use simple if statements and loops.

Template importing now has a seperate menu.

Variables

Variables must be added in a special HTML comment.

<!-- Template Variables

  Your Variables Here

-->

Failure to add variables in the above comment with the Template Variables written in the first line will break the template.

All variables should be added inside this comments and all variables should have an input type, a unique title, and a default value. See below:

{{input type::title||value}}

Input types determine the type of input that will show up in the templator. Titles and values should not have line breaks/new lines - special characters might also break them. Values are optional!

To use the variables in your HTML, add {{title}} anywhere in the code! Make sure the title has no spaces !!!

Organizational Variables

{{template::title}}

Purely optional. When the user downloads their templates, it'll save with your template name.

{{section::title}}

Adds a title to the form output for better organization.

{{subsection::title}}

Adds a subtitle to the form output for better organization.

Input Variables

{{text::title||value}}

Simple text input. For things like quick profile info, urls to images, links, etc.

{{textarea::title||value}}

For larger bodies of text or lists.

If you you separate the data with &&, the data will be split into an array and be able to be used with Handlebars's {{#each}}.

{{color::title||value}}

For hex colors. Make sure the initial variable has a value in RGB, rgb(000,000,000), or hex, #000000.

{{number::title||value}}

Number input. For things like border-width, paddings, margins, etc.

{{dropdown::title||option1&&option2&&option3}}

For simple dropdown options.

These must be in plain text, they can not have HTML in them. Something like {{dropdown::title||<i class="fal fa-circle"></i>,<i class="fas fa-circle"></i>}} will not work.

{{bootstrap::title||primary}}

A quick default dropdown for bootstrap colors made for your convenience!

Options for the default value are: primary, success, warning, info, or danger. Only put one in the value place!

Structure

When creating a template, you must declare all your variables in a comment that starts with <!-- Template Variables . All the HTML variables should only be the title of the variable, like so {{variable title}}. You can reuse the variable as many times as you want in the HTML body.

<!-- Template Variables

  {{template::test template}}

  {{section::Card Styles}}
  {{bootstrap::card outline||primary}}
  {{number::card border width||4}}
  {{dropdown::card border style||double&&solid&&dotted&&dashed}}
  {{number::card border radius||1}}

  {{section::Card Top}}
  {{text::example title||This is an Example Title}}
  {{text::example subtext||You can do so many things with the text!}}

  {{section::Card Middle}}
  {{textarea::description||Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend mi sit amet enim gravida, nec congue urna porttitor.&&Praesent porttitor enim et efficitur consequat.}}

  {{section::Card Bottom}}
  {{bootstrap::link color||primary}}

  {{loop::links}}
    
    {{text::url||#}}
    {{text::icon||fas fa-coffee}}

    {{text::url||#}}
    {{text::icon||fas fa-heart}}

  {{/loop::links}}

-->

<!-- Card -->
<div class="mx-auto my-md-5" style="max-width:700px;">
  <div class="card d-block text-center bg-faded card-outline-{{cardoutline}} p-5" style="border-width: {{cardborderwidth}}px;border-style: {{cardborderstyle}};border-radius:{{cardborderradius}}rem;">

    <!-- Title -->
    <h1>{{exampletitle}}</h1>
    <small class="text-muted">{{examplesubtext}}</small>

    <!-- Description -->
    <hr class="my-4 card-outline-{{cardoutline}}" style="border-top-width: {{cardborderwidth}}px;border-top-style: {{cardborderstyle}}">

    {{#if (isArray description)}}
      {{#each description}}
        <p>{{this}}

      {{/each}}
    {{else}}
      <p>{{description}}

    {{/if}}

    <!-- Links -->
    <hr class="my-4 card-outline-{{cardoutline}}" style="border-top-width: {{cardborderwidth}}px;border-top-style: {{cardborderstyle}}">

    {{#each links}}
      <a class="text-{{../linkcolor}}" href="{{url}}"><i class="{{icon}} fa-fw mx-1"></i></a>
    {{/each}}
    
  </div>
</div>

Loops

This will create an input where users can add and remove data on a whim - this is for areas like relationships.

Loops must be wrapped in {{loop:title}}...{{/loop}}. The inner variable names can conflict with other variables and it should be fine.

The inner data should be set up like any other variable.

{{loop::links}}
  
  {{text::url||#}}
  {{text::icon||fas fa-coffee}}

{{/loop::links}}

The HTML should be set up similar to this. If you want to use a variable outside of the loop, you'll need to use {{../variablename}}.

{{#each links}}
  <a class="text-{{../linkcolor}}" href="{{url}}"><i class="{{icon}} fa-fw mx-1"></i></a>
{{/each}}

Templator Helpers

The templator exposes several Handlebars helpers for common tasks like comparisons, type checks, and simple ranges. These can be used inside attributes, conditionals, and loops.

Equality & Inequality
  • eq: returns true if values are equal
  • ne: returns true if values are not equal
{{#if (eq relationship "true")}}
  Shows relationship section
{{/if}}

{{#eq status "active"}}
  Active
{{else}}
  Inactive
{{/eq}}

Note: Comparisons are numeric-aware. If both inputs are numbers (or numeric strings), they are compared numerically; otherwise they are compared as-is.

Less/Greater Comparisons
  • lt: less than
  • lte: less than or equal
  • gt: greater than
  • gte: greater than or equal
<i class="{{#if (gte gauge 1)}}fas{{else}}far{{/if}} fa-heart"></i>
<i class="{{#if (gte gauge 2)}}fas{{else}}far{{/if}} fa-heart mt-1"></i>
<i class="{{#if (gte gauge 3)}}fas{{else}}far{{/if}} fa-heart my-1"></i>
<i class="{{#if (gte gauge 4)}}fas{{else}}far{{/if}} fa-heart mb-1"></i>
<i class="{{#if (gte gauge 5)}}fas{{else}}far{{/if}} fa-heart"></i>
Type Helpers
  • isArray: true if value is an array
  • isString: true if value is a string
  • typeOf: returns JavaScript typeof result
{{#if (isArray description)}}
  {{#each description}}
    <p>{{this}}</p>
  {{/each}}
{{else}}
  <p>{{description}}</p>
{{/if}}
Math
  • math: does math! can include your variables and takes regular expressions
{{#math "cardborderwidth + (2 * 6)"}}{{/math}}
Range Generator

range: creates an inclusive numeric array from start to end. Useful with {{#each}}.

{{#each (range 1 5) as |n|}}
  <i class="{{#if (gte ../gauge n)}}fas{{else}}far{{/if}} fa-heart
            {{#if (eq n 2)}}mt-1{{/if}}
            {{#if (eq n 3)}}my-1{{/if}}
            {{#if (eq n 4)}}mb-1{{/if}}"></i>
{{/each}}

Tip: Use {{../variable}} inside loops to reference values from the outer scope.

Google Sheet Import

What this does...

If you're lazy like me, you can use a google spreadsheet to import data like templates and character information into the site. You'll be able to choose from a list of templates or a list of character sheets and characters to automatically fill in data.

Step by Step

  • Copy and fill out this sheet.
  • In the upper right-hand corner, click Share and change General access to Anyone with the link.
  • Copy the link, go to Settings and paste the link in Sheet ID.
  • If you have other sheets you want to import, add their names to the list below, seperated by a comma. Any sheet that's not the Templates sheet will be considered a Character sheet.
  • Save Settings! They'll now be saved to the site.

Importing Templates

  • Go to the templator and click the icon.
  • In the menu, you'll see a dropdown under Import Template, click on it and choose a template.
  • Click the icon beside it - this will import it into the editor below.
  • Review the template and make sure it's the one you want before clicking Import Template.
  • You should be good to go!

Importing Character Data

  • Go to the templator.
  • If character data has been imported, you'll see two extra dropdowns in the sidebar.
  • Click the first dropdown and choose which sheet you would like to import from.
  • Click the second dropdown and choose the character then click save.
  • This will overwrite data in the template HTML! This will not overwrite anything in the options or Template Variable comment.
  • If you want to overwrite the character data with your own, select None in the character area and resave.

On the character sheet, you're not beholden to the columns that I've already added. You can add, remove, and rename columns as you see fit. Any columns in the sheet that have the same name as the variables will overwrite said variables.

Variables do not have to be declared in the Template Variable comment for this to work.