Inkproof Editor

An online Epub Editor

Comment

Inspiration:

This is a product I really wanted to exist, but was too niche, and a lot of work for me to create.
This hackathon provided me with an excuse and a really useful tool to really accelerate and minimise the work needed to bring this to life.

Context:

I am an avid reader, though I prefer to read digitally using ePUBs.
I often find many minor formatting issues inside my ePUBs.
I wanted a tool that I could use to fix these minor formatting issues easily.

What it does

It is an web editor that imports ePUB files and drops the user in a modern editor experience based on Monaco (the VSCode editor) along with modern comforts.

  • Dark + Light Themes
  • Live Preview Window
  • Prettier Formatting for ePUB's xHTML.

How we built it

I started with a create-next-app foundation with my preferred libraries preinstalled (ShadCN, Tailwind, XState/Store)

I instructed Bolt to use the foundation to create an ePUB editing application with specific criteria

  • Use the browser origin private file system (OPFS)
  • Utilise Monaco as the editor
  • Implement a preview pane with custom-theme support These prompts were chosen after previous failed prompts:
    • A earlier simpler starting prompt failed as adding new features made that application more and more unstable
    • A overly complex starting prompt with multi-user support, accounts and auth failed to compile and was too much of a mess to debug and fix.

Afterwards, the rest of the functionality was fleshed out through a 4 step process

  1. Tell Bolt to implement new feature
  2. Test the new functionality locally to validate that it worked and to see if it caused any regressions.
  3. Fix any bugs locally with the assistance of Github Copilot
  4. Push changes to Github repo and start from 1. with new feature

Challenges we ran into

  • I had a couple issues with package dependencies which were difficult to root cause and debug.
  • It took quite a while to optimise and get acceptable performance from the editor.
  • Due to the large codebase, Bolt would use about a 100k tokens per edit

Accomplishments that we're proud of

  • The editor experience is quite smooth and no longer drops from 120 to 40 fps with average speed typing
  • The preview pane generally persists its scroll position without flashing when the content is updated.
  • The preview pane has supports independent theming separate from the main application themes

What we learned

  • Bugs do show up in well-used dependencies
  • It isn't that difficult to patch npm dependencies using patch-package
  • How and when to memoise components in React to optimise performance

What's next for Inkproof Editor

  • Offline PWA functionality, edit your ePUBs offline
  • ePUB creation, not just edit, create your ePUBs in Inkproof
  • Multi-user support, share your edits and collaborate

Built With

Share this project:

Updates