Sub-Stytler

One day, I came across a YouTube video with colorful, styled subtitles.
I was instantly drawn to how expressive they were — but when I looked into how to make them myself, I realized just how difficult it was. Creating such captions required complex tools or workflows that felt out of reach. So I let go of the idea.

Then, I stumbled upon the Bolt Hackathon. As I was brainstorming what to build, the memory of that styled subtitle editor came back to me — something I had once given up on.
I had previously tried to build a similar tool by teaching myself TypeScript, but even getting the basic layout to work was overwhelming. I gave up before I could even render a UI Area.

This time, thanks to Bolt, I had a foundation to work with — and I kept building and refining until I could finally share this project publicly.
Though I couldn’t implement everything I originally planned, I’m genuinely proud of how far it’s come. And I’m deeply grateful to AI technologies that helped me overcome the hurdles I couldn’t manage alone.

This editor reflects many small frustrations I’ve had in creative workflows.
From auto-saving to fully adjustable layout placement, I tried to address all the things that slow creators down.

I did my best to implement as many features as I could — but I have to admit one thing: I’m still a high school student, and my studies take priority.
Even though I had a month, I wasn’t able to focus much on this project until the final days. I pulled several long days at the end, and though there’s still so much left to do, I’m happy I made it this far.

This feels like a major milestone in my life.
It really feels like I built something big.
Thank you so much for this opportunity.

Built With

• css
• dexie.js
• eslint
• framer-motion
• git
• html
• javascript
• node.js
• postcss
• react
• tailwind-css
• typescript
• vite
• vitest
• zustand