Made a TH code editor with live preview 👀

Posted 4 years, 10 months ago by circlejourney

I just got in contact with the admins, and they said that this was fine, so I'm gonna go ahead and share it!

For the longest time, editing profiles on TH has been a pretty laborious process of editing some lines, saving, and then navigating to the page to see the changes and figure out what needs tweaking. I was kind of tired of doing that, so I created a TH code editor with live preview.

You can try it here.

It's still pretty crude since I threw it together in a few hours, but it works! You can toggle between site themes and different HTML areas. I would be happy to hear about what else you'd like to see, especially if this is going to get used by a lot more people than just myself. And of course, do report bugs to me.

I'm still working on implementing TH's CSS blacklist, but for now just note that certain CSS properties such as border-radius won't show up on Toyhouse itself.

Comments

sixofswords

Holy shit I think you’re a hero

dogstarlite

YOU ARE A HERO thank you Circ!!!

cosmicconundrum

wow... bless. the hero we truly needed

This user is not visible to guests.

b0ykult

holy hell. last night, i was actually about to post on the forum asking if there was something like this...

you're an actual godsend. thank you SO MUCH ;_________;

circlejourney

I'm glad! Once I've polished it up I might put it in the HTML forum just so more people who need it can find it. I sure hope the mods are cool with that!

This user is not visible to guests.

circlejourney

I'm glad it's helpful! Oh ay yeah custom CSS would be super useful, and not at all hard to implement.

I just discovered a bug that makes Javascript-enabled features, like tabs and carousels, not work. Attempting to fix it rn

This user is not visible to guests.

circlejourney

Yeah, I was thinking of sanitising the HTML code so that style tags don't work (since the same would happen on TH), but that is definitely a valid workaround if you wanted to insert CSS.

But in any case, I waited till I'd both fixed the Javascript issues and added a CSS editor to reply. I'm actually using your code to test the editor right now because your theme has some interesting stuff going on, e.g. the infobox for definitions of terms whose text is stored in your user blurb. That's clever, but I suppose you'll have to paste that into the HTML editor as well.

Nicely enough, your pages seem to work just fine in the editor, so I'm pretty confident that it's fully-functional now, barring issues I have yet to pick up on. Thanks for the feedback!

This user is not visible to guests.

circlejourney

It was no trouble at all! I was thinking I couldn't be the only person who needed this, and it turns out I was right!

Waltz

wah, sugoi....

circlejourney

Caine

THIS IS A BLESSING!!! Thank you for making it ;___;

circlejourney

Aw, I'm glad it's useful to you too! I'm always like, TH needs to give us a way to preview our code, I have made one invisible bulletin too many just for that purpose.

Caine

I actually have several html character tabs just so I can test things around haha and like it works but this kind of preview thing is way more handy

hedgemaze

This is great! Thanks for making it, circ. c:

circlejourney

No problem! It kinda opens up the door for lots of other external TH utilities...like a random character selector, or games...

(also I need to work on getting Javascript enabled Bootstrap utilities like tabs to work)

This user is not visible to guests.

classicturtle

Oh this.... this is beautiful...... bless u sm...

circlejourney

Thank you, I'm glad I'm not the only one who might find this useful!