Stuck on the loading screen? Post a bug report on our Toyhouse world or try a legacy version.

If you suspect your code has crashed the editor, click here to download your code as text files and hard reset the editor.

Fun fact! You can also hard reset by typing Please reset! in the HTML panel.

Welcome to the Toyhouse Live Code Editor!

1.12 (13 August 2024): This update adds light mode, which can be accessed through the UI options menu. The Import tool has also been pared down after Toyhouse's Captcha changes. It now gives more informative error messages.

Want to contribute? You can make and vote on feature suggestions at our Toyhouse World! Or if you're a web developer, feel free to make a fork on the Git repository. This editor will always be free to use and ad-free, but support is always more than welcome.

Ko-fi My Toyhouse Code customs Code freebies

Created with Ace, ace-colorpicker, sass.js, jQuery, Bootstrap, Font Awesome, Foundation Icons, and Toyhouse's source code and stylesheets. This editor uses cookies to save your work automatically, and tracks usage statistics. I am not affiliated with Toyhouse. I am not responsible for any loss of work that may arise from usage of my code editor. By using my code editor, you agree to all of the above.

Got it! Changelog Known issues Versions

1.12 (13 August 2024): This update adds light mode, which can be accessed through the UI options menu. The Import tool has also been pared down after Toyhouse's Captcha changes. It now gives more informative error messages.

1.11 (26 October 2023): 1 million pageview update!

  • Debuting the much requested what-you-see-is-what-you-get (WYSIWYG) mode. Select the WYSIWYG checkbox to try it; unchecking or clicking on the HTML editor will turn off WYSIWYG and update the HTML.
  • Finally, the import feature works properly. This update attaches the importer to my bot account fuchsiamoonrise. Any profile that is public or visible to logged in users and has <u id='allow-thcj-import'></u> should be importable. I've also added the option to set all your character profiles as importable: simply include the snippet <u id='allow-thcj-import-all'</u> at the start of your user profile.
  • Under the hood, I have moved all code storage to indexed database. After several bug reports mentioning that code would randomly disappear, I'm trying IDB which has a much higher storage capacity. The code editor should migrate your data silently in the background, but let me know immediately if anything goes wrong, because there's a chance that the new version of the editor will malfunction completely for some people. In that case, use the last localStorage version. Note that from this update onwards, your code storage will be out of sync with old versions.
  • Added bulletin with no poll layout, as requested.
  • And, a QOL improvement: you can now save code in the active panel by pressing Ctrl + S.

Thank you so much for all your love and support through the years. I never knew my little personal code project would be used by so many people!

1.10.2 (10 August 2023): Partially rolled back yesterday's update after it introduced a problem where unclosed i tags were not being handled properly. For the HTML tags inside comments issue, I have added an alert informing the user of the problem. Pending a cleaner solution.
1.10.1 (10 August 2023): Fixed the issue where HTML tags inside HTML comments were causing the editor freeze at the load screen. Ace editor has also been upgraded to version 1.4.14.

1.10.0 (20 August 2023)

  • Preview window now waits for the user to be idle before updating (to improve memory usage). The preview window used to update once a second, so it could update in the middle of typing. This wasn't great for memory usage! Now, the editor will wait for you to stop typing for half a second before updating the preview window. This feature passed beta test but if you don't like it, let me know! I might add a toggle for it.
  • Custom naming for exported txt files. now when you save exports, you will be prompted for a project name. files saved will have this project name in the filename, to make it easier to sort through exports.
  • Backup feature. How this works: the editor saves a backup copy of your code inside the local storage every 5 minutes + when you close the window, if the code is not blank, so you can't accidentally overwrite it with a blank. When the text area is empty, the "clear" button turns into a "restore backup" button. Below you'll find a "guide" for how to use it. This feature is a stopgap but you should still save copies of your code frequently!
    How to retrieve backups If something happens and your code vanishes or gets corrupted, here are the steps to retrieve your most recent backup:
    1. Don't close the window! If you do, the old backup may get overwritten.
    2. Select everything in the window where you want to restore the backup and cut it to your clipboard, I recommend pasting it into the scratch pad so you have a backup.
    3. The trash button will turn into a trash undo button. Click the trash undo button and the most recent backup should appear.
  • Spoilers should now be toggleable. Thanks for reporting this issue!
  • File upload, hard reset, blurb toggle code restructured.
  • All remaining ace colorpicker bugs should now be fixed. Hex codes in the HTML area should now be properly highlighted/tokenised.
  • Moved sass object into global namespace to reduce memory load (creating too many sass objects was probably the reason it kept crashing...not sure why it was originally written that way...)
1.9.0 (3 June 2023): Adds code formatter feature by Venfaaniik (curly brackets button)—automatically adds line breaks and indentation to your code to make it easier to read and navigate! This update also adds new UI on/off toggles for line numbers, autocomplete, and colorpicker. Did my best to fix the text area sizing issues, and squashed a couple of bugs that were reported recently (e.g. update button not working). Under-the-hood changes in how cache busting works, and a broad restructure of the code.
1.8.1 (16 March 2023): Fixed an issue that was making some Font Awesome icons render incorrectly.

1.8.0 (26 March 2023): "this has been a long time coming" update. I'm pleased to bring you this fairly big update, which includes the following changes:

  • New feature (beta): Colour picker, using ace-colorpicker by easylogic. Huge thank you to Venfaaniik for bringing the extension to my attention and working with me to integrate it! There are still some little bugs that I'll iron out...eventually.
  • New feature: Mobile view toggle. This was requested a lot and I'm still ironing it out across various devices (the flex sizing can be finicky).
  • New feature: Undo and redo buttons. This was also requested a lot and the poll indicated that most people would find this useful. Hopefully makes for easier mobile coding.
  • New feature: Show/hide UI panel button. Now you can hide the entire UI and preview your code at the full screen size. It's the little pink button in the bottom right corner of the preview area.
  • New layouts: Bulletin, world page, literature chapter
  • Updated feature: Code import now imports both HTML and CSS from the chosen page (if the "allow-thcj-import" line is found on the page) and should also be a little less buggy.
  • Under the hood: PHP backend now imports Toyhouse pages with cURL instead of include (the janky and kinda insecure old-fashioned way of doing it).
  • Housekeeping/debug: Tooltips should now appear on mouse over. There may be some layouts where I haven't caught non-functional tooltips—let me know if you find any.
  • Housekeeping/debug: Reorganised layout menu into an order that makes a bit more sense.
  • Housekeeping/debug: Cleaned up and deidentified the layouts because I found some story IDs here and there.

By the way, the Github repo is also way, way tidier now, and now has a readme that will hopefully make it much easier to start edited and previewing in a local dev environment. I moved the manual versioning out of the dev environment (as I should have done long ago). You're always welcome to help me out if you wish. I'm just one person and there's a lot of feature requests and bug reports!

Because of the size of this update, I'm expecting there to be some bugs that I haven't caught. As always, if you run into any issues, you can report the bug here and use the previous version. And of course, if you like the work I'm doing, I'm always happy for donations to my Ko-fi!

1.7.2 (27 October 2022): The site has migrated to a new server and I forgot to update my Cloudflare records to point to the new address...until loads of people had noticed the website was down. Apologies for the inconvenience and thanks for letting me know!

While I'm here, I figured I'd make the much-requested update to Font Awesome 6. Many many thanks again to alyeong for the subscription! As always, let me know if you see any unusual behaviour.

Finally, I'm running a poll about the import feature. Check it out here!

1.7.1 (3 July 2022): Synced the source files to Toyhouse's May update. I previously attempted this and it didn't work out of the box, so I've given it a more careful treatment.

1.7.0 (17 June 2022): Birthday update! Requests fulfilled: low contrast toggle, blurb editing. Reorganised UI toggles into their own menu. Also added the new mascot image. As always, do let me know if you run into any bugs!

1.6.1 (22 May 2022): Reverted a number of changes from the last update because it was breaking the editor. Apologies for not catching that before pushing it out! Will update the code at a later time.

1.6.0 (16 May 2022): Updated the source files to match Toyhouse's recent update, and made another (hopefully final) effort at improving the cache busting. Removed unstable version and now managing watermark feature via Github.

1.5.4 (9 May 2022): The project now has a World where you can share ideas and vote on issues/suggestions! For this update, I also made some QOL fixes like HTML panel toggle, big text size toggle and made clicking outside the info modal close the modal.

1.5.3 (2 February 2022): Hard reset was necessary and hard to locate, so I added a hard reset link on the loading page. This will hopefully help with situations where the code editor breaks due to issues with the code. You can also hard reset by typing Please reset! in the HTML panel. Better error handling is pending. Also, "Latest update" badge now updates automatically.

1.5.2 (30 December 2021): Reorganisation and cache busting the old fashioned way. There may be linkage issues with older versions. Will fix them as I find them!

1.5.1 (11 November 2021): Migrated to the Git repository! You can clone it and make pull requests here.

1.5.0 (6 October 2021, Theme Designer Support): Added new layouts:

  • Character basic tab
  • Character gallery (static)
  • Character library (static)

Also added a sidebar toggle and image lightbox, and updated the folder layout to include pagination. These changes will hopefully help CSS theme designers. Feel free to let me know if you run into any problems!

1.4.2 (7 July 2021): Updated Import feature. To prevent the import of codes you do not have rights to use, only profiles with the string allow-thcj-import can be imported. Please paste the following line into your profile to enable import: <span id="allow-thcj-import"></span>. I know it is a little tedious, but it is the best solution I've got as of now, without an API.

1.4.1 (7 July 2021): Temporarily disabled the import feature while I add security measures. Thanks for understanding!

1.4.0 (6 July 2021, Data Imports): Added data import feature, Warning layout and a button to insert lorem ipsum text. Enter the character ID (a string of numbers) or username to import a profile. It has to be public and have no warning.

1.3.6 (22 June 2021): New unstable update—I'm testing a feature that lets you import data from character and user profiles to fill the template (replacing the placeholders)! Definitely report any bugs or issues to me, I don't know how well it functions on devices with lower processor capabilities.

1.3.5 (21 June 2021): Removed the quick fix from 2 January (which applied a specific resizing code to mobile Safari). If you are a Safari user and have started having problems that you did not have before, please let me know! In the backend, I've also added some auto cache-busting so hopefully there will be fewer problems with source files not updating.

1.3.4 (30 April 2021):

  • Added a vertical layout toggle to better utilise screen space for people with smaller desktop screens. Thank you coro for the suggestion! Do let me know if you run into any issues using it or have suggestions for improvement.
  • For usability reasons, I have also added a hard reset function that clears all drafts and settings. To perform a hard reset, simply type Please reset! in the HTML area to get the prompt, and click OK.

1.3.3 (27 March 2021): Added SASS support back on request.

1.3.2 (4 February 2021): I have rolled back to the 14 January version while I properly iron out the tab remembering feature, since I was receiving a number of bug reports. Thanks for your patience and sorry for the inconvenience!

1.3.1 (28 January 2021): Added a much-requested feature: the editor now remembers what tab you were on and automatically remains on that tab even when the code is updated. I have only tested this on Chrome and Firefox so do let me know if you run into any problems on other browsers. Still pending a fix for the inability to highlight text on mobile browsers.

1.3.0 (14 January 2021, No More Rectangles): Installed some icon sets!
  • At long last, I have installed Font Awesome Pro, with many thanks to alyeong! All Font Awesome icons should now appear as intended. (Do note that the version of FA installed here is actually more recent than Toyhouse's, so some icons that appear here may not show up on TH!)
  • While I'm at it, I also installed Foundation Icons, which TH uses in some of its UI elements; I did not realise this until today.
  • Fixed a bug that was preventing CSS code from being autosaved.

1.2.3 (10 January 2021):

  • Added unstable preview where hopefully I'll be able to get more help with bugtesting before updates go live.
  • (Under the hood) the editor now pulls notes, changelog, known issues and version list from the same files across all versions (starting from this version). This will hopefully help with organisation!
  • Also, I've added a rewrite rule that should circumvent the cached file problem by automatically adding cache-busting IDs. Let me know if you run into any trouble with files not loading.

1.2.2 (2 January 2021): Quick fix for a bug that was making the editor fields resize incorrectly in Safari. I have only been able to test it in Chrome, Firefox and Safari for iPad; if you run into any problems in other browsers, let me know!

1.2.1 (28 December 2020): Important bug fix for a problem that was breaking the editor (the regex pattern I was using to strip code of script and style tags had a typo). It should work now, but still do not hesitate to let me know if you've found any problems!
I also added a few changes to improve mobile display. Resizing should now work on mobile and I have a button for toggling the editor panel visibility. I am testing these through Chrome dev tools, so let me know if it's working right on mobile!

1.2.0 (27 December 2020, the Big Cleanup I):

  • Added buttons that allow you to download your code as .txt files. Thank you anisoptera-eyes for the suggestion!
  • Clear button added.
  • Added a text scratchpad as requested. Thank you Miner5431 for the suggestion!
  • Under the hood: the preview window is now housed in an iframe. This should prevent issues with class name conflicts that were popping up quite frequently.
  • Toggle button for mobile view added and generally made it more friendly to mobile users.
  • Overhauled resizing—it resizes far more smoothly now.

1.1.7 (13 September 2020): Moved all page layout templates to separate files for organisational reasons, added navigation bar.

1.1.6 (1 June 2020): Copied all Toyhouse CSS and JS files to my server, to prevent cross-origin request errors. They will be manually updated whenever Toyhouse updates its files.

1.1.5 (11 May 2020): Reorganised layout, option buttons are now in the bottom left corner. Also added a popup containing information about the project and disclaimers.

1.1.4 (14 December 2019): Added a hotfix that slows down the page update rate (when Auto-update is turned on) to prevent webpage display crash errors. May return to this in the future to implement a more elegant solution.

1.1.3 (5 November 2019): Clicking in the HTML and CSS text areas to bring them into focus now makes the placeholder text disappear.

1.1.2 (30 October 2019): CSS panel visibility can now be toggled on and off with the CSS panel checkbox.

1.1.1 (5 September 2019): Fixed bug that made it possible to drag the adjustment bar off the bottom of the page rendering it unreachable.

1.1.0 (24 June 2019): Added Layout: World page.

No select/cut/copy/paste functionality on mobile devices. I will have to look into Ace editor docs to see if there is a workaround for this.

Cursor is sometimes visually displaced from actual position. This is a problem with Ace Editor panels not resizing correctly. It is a difficult error to recreate and as such, I have yet to be able to fix it. Currently, refreshing the page will fix it.

CSS using the @import rule does not work. I cannot fix this: this syntax is used to reference a protected stylesheet on the Toyhouse website, which is designed to prevent people from stealing them. Without the original CSS code, you can't preview it in this editor.

HTML   Blurb
CSS
Scratchpad