Blueprint by Tiny
Return to
Return to Tiny.cloudTry TinyMCE for Free
Search by

Text or treat: TinyMCE’s seasonally spooky skin

Ben Long

October 26th, 2019

Written by

Ben Long


World of WYSIWYG

What did the skeleton say on Halloween?

Gimme some skin!

Skeletons and gamers aren’t the only ones looking forward to new skins this Halloween. At Tiny, we’re excited to show off one of ours, and we’re “leaking” it to make sure you have plenty of time to enable it and surprise your users first thing Thursday morning (October 31). 👻

The Tiny Halloween 2019 skin applied to TinyMCE.

Live demo

We’ve applied the Tiny Halloween 2019 skin to TinyMCE in a React app on CodeSandbox, so you can check it out and play around with it right here.

Apply the Halloween skin to TinyMCE

Applying skins to TinyMCE is easy:

  1. Download. Download the Tiny Halloween 2019 file.
  2. Unzip. Unzip the file in a location that can be accessed from where the editor is initialized.
  3. Configure. Add configuration to the editor initialization script, specifying the path to the location of the skin and css files:

    skin_url: "/skins/ui/tiny-halloween-2019",
    content_css: "/skins/content/tiny-halloween-2019/content.css"

Looking at the source code in the React example above, you’ll find the skins folder inside the public folder, and the initialization script in index.js.

The designer

Complete with “pumpkin orange” highlights, the skin was created by one of our principal designers, Fredrik Danielsson, using the TinyMCE Skin Tool, which is currently under development. Fredrik is also the designer and architect of the tool.

Skins are fun to make because you can really customize the pumpkin out of it, and the upcoming skin tool will make it even easier.

Fredrik Danielsson, Principal Designer at Tiny
Sneak preview of the TinyMCE 5 Skin Tool (coming soon).

What next?

While you’re here, find out more about the Tiny Skins and Icon Packs premium plugin. We’ll soon have a new thin icon pack available too.

And stay tuned for news of our dark mode (coming soon). Actually – spoiler alert! – it’s already available in the community version of TinyMCE 5.1, and you can initialize it with the following settings.

skin: "oxide-dark",
content_css: "dark"

Happy Halloween!

Skins and Icons
byBen Long

Computer scientist, storyteller, teacher, and an advocate of TinyMCE. Reminisces about programming on the MicroBee. Writes picture books for kids. Also the wearer of rad shoes. “Science isn’t finished until you share the story.”

Related Articles

  • World of WYSIWYG

    Editing modes: Classic view, Inline editing and Distraction free modes

    by Joe Robinson in World of WYSIWYG
Subscribe for the latest insights served straight to your inbox every month.

Deploy TinyMCE in just 6 lines of code

Built to scale. Developed in open source. Designed to innovate.

Begin with your FREE API Key
Tiny Editor
Tiny logo
Privacy Policy - Terms of Use© 2022 Tiny Technologies Inc.TinyMCE® and Tiny® are registered trademarks of Tiny Technologies, Inc.


  • TinyMCE
  • Tiny Drive
  • Customer Stories
  • Pricing