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.
If you prefer dark or light. Mind your eyeballs.
The color of the ace editor - again, mind your eyeballs. Those things are important, take care of them.
What sort of Toyhou.se page you're editing. There's the basic one for profiles, essentially, and then one for bulletins and another for forum posts. (I made this for my dear friend Gogo so he could edit bulletins in peace.)
Neither editor automatically updates anymore for multiple reasons - but you can have it auto save your work at a set interval. (Or you can rawdog it, your call bestie)
Import a Google Sheet with character information. You'll be able to import said character information into your template.
The editor for the main editor page and the templator work the same. I've done my best to set it up like Toyhou.se's editor.
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.
As of May 2025, the templator has received a major overhaul and bug fixes. You will be able to restore the original template, and it no longer breaks if variables are saved wonky.
Save on edit has also been removed, and bigger templates can now be edited without the page crashing.
Old templates might not work without some tweaks as the templator now relies on a specific structure to work.
The templator has 2 coding areas. The first one is for your original template - you can edit it and add/remove variables as you see fit. The second one is for your modified template, it's read only and is just there for you to copy/paste if you don't want to download the template.
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!
Variables can not be inserted into other variables. Something like {{textarea::title||{{text::title||value}}}} will break the template.
Purely optional. When the user downloads their templates, it'll save with your template name.
Adds a title to the form output for better organization.
Adds a subtitle to the form output for better organization.
Simple text input. For things like quick profile info, urls to images, links, etc.
For larger bodies of text like History or Personality info. Will automatically seperate new lines with a <p></p>.
If you want to add multiple lines in the initial value, please add && between them.
This will input user text as a simple <li>[user text]</li>.
If you want to add multiple lines in the initial value, please add && between them.
For hex colors. Make sure the initial variable has a value in RGB, rgb(000,000,000), or hex, #000000.
Number input. For things like border-width, paddings, margins, etc.
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.
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!
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}}
{{subsection::Link One}}
{{text::link one url||#}}
{{text::link one icon||fas fa-coffee}}
{{subsection::Link Two}}
{{text::link two url||#}}
{{text::link two icon||fab fa-twitter}}
{{subsection::Link Three}}
{{text::link three url||#}}
{{text::link three icon||fas fa-link}}
-->
<!-- Card -->
<div class="mx-auto my-md-5" style="max-width:700px;">
<div class="card d-block text-center bg-faded card-outline-{{card outline}} p-5" style="border-width: {{card border width}}px;border-style: {{card border style}};border-radius:{{card border radius}}rem;">
<!-- Title -->
<h1>{{example title}}</h1>
<small class="text-muted">{{example subtext}}</small>
<!-- Description -->
<hr class="my-4 card-outline-{{card outline}}" style="border-top-width: {{card border width}}px;border-top-style: {{card border style}}">
{{description}}
<hr class="my-4 card-outline-{{card outline}}" style="border-top-width: {{card border width}}px;border-top-style: {{card border style}}">
<!-- Links -->
<a class="text-{{link color}}" href="{{link one}}"><i class="{{link one icon}} fa-fw mx-1"></i></a>
<a class="text-{{link color}}" href="{{link two}}"><i class="{{link two icon}} fa-fw mx-1"></i></a>
<a class="text-{{link color}}" href="{{link three}}"><i class="{{link three icon}} fa-fw mx-1"></i></a>
</div>
</div>You can fill this sheet with character and template data and import it to the templator. (You'll need to make a copy! Go to File > Make a Copy on the sheet).
Make sure your sheet is public and then hit the icon in the header on this page. Paste the link to the sheet, or just its id, in the the 'Import Google Sheet' area. Then save changes. You'll need to refresh the template page for the import menu to show.
Once you have imported your Google Sheet via site options, you can import any character information into the input fields.
Only inputs with the same name as the sheet column header name will be overwritten. For example, if there's a column named 'Description' on the sheet and a variable named 'Description' in the template, it'll overwrite the input value for the Description.
Note that importing character data will overwrite anything in those fields.
You'll also be able to import whole templates. Note that this will delete any template you were working on so proceed with caution.