11tyCMS: First design & file management

posted on Oct 4, 2026

Its been an exciting week in 11tyCMS development. I've been working on and off to get things to a usable state as quickly as possible. Let's dive in!

🖼️ Design

Ladies, gentlemen and those beyond gender, I present to you our new design:

A app window split into 2 secions side by side: the sidebar on a dark blue background with a lighter hue. It has a heading called "posts", followed by a list of posts beneath it. There's a "select folder" button at the top and a plus button beside the "posts" heading. To the right, there's another box taking up the rest of the window with a title textbox at the top containing the name of the selected post, beneath it there's a table showing the metadata of said post. Beneath that, there's a toolbar in the markdown editor with options for undo, redo, bold and italics. Beneath that is the editor area where the user can write their post content

🎨 The colors

So far, I'm liking the color scheme. Varying levels of dark blue suit it quite well and makes for a color scheme that doesnt feel too overwhelming or jarring to look at. That being said, I'm concerned our color scheme might be a little too singular on colors, as its basically just one shade of blue of varying lightness. If anyone has any advice on color theory and how it integrates into design and how I might find other good colors and where to put them, please let me know!

📋 The sidebar

So you can see now that 11tyCMS is capable of finding collections automatically, and their posts and arranging them into the sidebar. If I'm being perfectly honest, I don't think there's a sustainable future for this design choice. It will scale horribly with more than a few hundred posts. It also makes arranging by dates and searching collections very... Difficult. I think I'd rather have a list of collections, which you click on that leads you to a grid list of all of that collection's posts: paginated, and easily sortable by whatever attribute you'd like.

But for now, it works well enough.

Either way, I need to make sure this can collapse, so that the MD editor can take dominance over the screen and remove any unnecessary distractions for the user.

🗂️ Metadata table

I've designed a little metadata table. Its not really functional for much, other than displaying out pre-existing data in the frontmatter of a post. However, in the long term it will allow you to add and edit frontmatter data. It will take a while before this is developed though, as I dont consider it critical functionality just yet. Its going to take a lot to get working as I'll need to make sure that there's an editor input for each type of data such as:

  • Strings
  • Booleans
  • Arrays
  • Dates

I'm also trying to figure out where to put the table. I fear putting it beneath the title of a post makes the design look cluttered. I could maybe fix this by making it collapsable, but it would still be one big long strip at the top of the editor... The alternative would be to put it in a little pop up menu within the MD editor's toolbar. But then, this is hidden away and could be bad UX, it also hides away metadata you might want quickly and easily accessible. I need to do more thinking on this. Any feedback, please let me know on Mastodon!

Also, please ignore the save button, its merely a temporary measure until I sort out automatic file saving (see below!).

🗄️ File management

This one caught me off guard, not going to lie. I thought it would be relatively easy, until I remembered that all 3 major OSs have HUGELY different file systems that have their own quirks. Thankfully chokidar has saved my bacon here. It's truly excellent at allowing me to focus on the file management, rather than handling edge cases of how 3 different OSs handle file management.

So far, 11tyCMS can now react to files being added or removed from collections. Editing of titles or file names are not yet supported, however. I'm NOT happy with the code for it, but for now I'm just figuring out how things work before I look at how it can be restructured. But so far, I'm happy with the functionality.

💾 Automatic file saving

One problem about this app at the moment is that it doesnt save automatically. I want it to save automatically as you write, but figuring this out isnt as straightforward as it first seems. Here are a few approaches I've thought up with their pros and cons:

  • Save on each keystroke

    • This method would make sure that nothing ever gets lost. If you've typed it, its probably saved
    • BUT, this will scale horribly. On large posts, it will be more and more demanding on compute power, and it will put strain on battery life and your system drive.

  • Save every couple of seconds

    • Seems a bit much and when do we start saving periodically and when do we stop?

  • Save x amount of seconds after idle

    • This feels like the most solid approach, its a balance between being more gentle on battery and storage drives, while providing a reasonable level of redundancy. Few people type non stop, so for most this will make sure their writing is safe.
    • I can make this configurable in settings so that people can have it save a second or 5 seconds after keyboard idle in the editor, for example.

This will likely be the next thing to implement.

👍 Conclusion

So thats what's been going on in 11tyCMS development this week. Not going to lie, I'm definitely over the initial phase of development where youre deluded enough to think: "oh wow this should be pretty quick to put together, its quite simple!", it is NOT simple. There are a LOADS of design challenges ahead here, but my unending desire to have a nice UX/UI editor for 11ty sites is hopefully enduring, as is my tenacity. Hopefully those will keep the development fueled 😉

Either way, thank you for reading and I will keep everyone posted on any developments in the coming week over on Mastodon and here on my blog.

Over and out <3

Thinkymeat

(they/she)

I share my thinkymeat's thoughts here 🧠 .
Just a late 20s transfemme with a passion for academia, science, politics and coding.