DEV Community

Cover image for Making PasteDB Easier to Read: Word Wrap & Font Size Controls
Aditya Sorathiya
Aditya Sorathiya

Posted on

Making PasteDB Easier to Read: Word Wrap & Font Size Controls

#opensource #productivity #showdev #webdev

Hey everyone! 👋

I'm Aditya, a student developer, and I'm building PasteDB — a paste-sharing platform for code, text, notes, logs, and more.

While using PasteDB myself, I noticed a small but annoying problem.

If a paste contained a very long line, the viewer would require horizontal scrolling.

That isn't a huge problem for code, but for normal text, notes, documentation, or things like copied questions, it can make reading pretty uncomfortable.

So I decided to improve the viewer.

📝 Introducing Word Wrap

PasteDB's viewer now has a Word Wrap option.

When word wrap is disabled, long lines stay on a single line:

This is a very long line that continues and continues and requires horizontal scrolling...

When enabled, the same content can automatically wrap inside the viewer:

This is a very long line that continues
and continues and now wraps naturally
inside the available space.

The important part is that this is soft wrapping.

The actual paste content isn't modified.

So copying the paste still gives you the original content exactly as it was.

🔤 Font Size Control

I also added a font-size slider.

Instead of having only one fixed font size, you can adjust the viewer to whatever feels comfortable.

Something like:

Small  ────────●─────────  Large
                 16px
Enter fullscreen mode Exit fullscreen mode

The selected size is applied to the paste viewer and the output area as well.

This is particularly useful when viewing PasteDB on different screen sizes.

⚙️ Why I put them inside "More Options"

Initially, I considered putting both controls directly in the toolbar.

But the PasteDB viewer already has several actions:

  • Copy

  • Raw

  • Images

  • Run

  • Nearby Share

Adding two more buttons would make the toolbar increasingly crowded, especially on mobile.

So I decided to keep the main actions visible and put the reading controls inside a More Options menu.

That keeps the interface cleaner while still making the settings easy to access.

💾 Your preference is remembered

I didn't want users to have to enable Word Wrap every time they opened a paste.

So PasteDB stores the preferences locally using localStorage.

For example:

localStorage.setItem(
  "pastedb_word_wrap",
  "true"
);
Enter fullscreen mode Exit fullscreen mode

And the font size is stored similarly.

This means your viewer preferences can persist between paste views without requiring an account or changing the actual paste.

🛠️ A small technical challenge

Getting word wrapping to work properly wasn't just adding:

white-space: pre-wrap;
Enter fullscreen mode Exit fullscreen mode

PasteDB's viewer uses <pre>
and <code> elements, and the <pre> originally had a min-width based on the content.

That meant a very long line could force the code block to become wider than the screen.

So the important part was allowing the code block to shrink to the available width:

pre {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}
Enter fullscreen mode Exit fullscreen mode

Then the code itself can wrap:

code {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
Enter fullscreen mode Exit fullscreen mode

Without fixing the width behavior, the "word wrap" setting doesn't really feel like word wrap.

🎯 Why these small features matter

This isn't a huge feature.

It's basically two viewer settings.

But I think these are the kinds of small improvements that make a product feel much better to use.

PasteDB isn't only used for code. You can paste:

  • 📝 Notes

  • 💻 Source code

  • 📋 Logs

  • 📄 Long text

  • 📚 Documentation

  • 🔗 Links

  • 🖼️ Images

  • 🔐 Private/encrypted content

So the viewer needs to work well for more than just programmers looking at code.

🚀 What's next for PasteDB?

I'm continuing to improve PasteDB and add features based on things I actually need while using it.

Some of the things I've already worked on include:

  • Syntax highlighting

  • Markdown preview

  • Custom URLs

  • Paste expiration

  • Password-protected pastes

  • Image pastes

  • QR sharing

  • Nearby transfer

  • Version history

  • API access

  • End-to-end encrypted pastes

  • A built-in code runner

And there are still a lot more ideas I want to experiment with.

💬 I'd love your feedback

If you use PasteDB, I'd love to know:

What would you improve about the viewer?

Is there a feature that would make reading or sharing pastes easier?

I'm especially interested in small UX improvements like this one.

Thanks for reading! ❤️

PasteDB: https://pastedb.netlify.app

GitHub: https://github.com/sorathiya903/pastedb

The cover image is AI generated
The real UI is like
Actual UI Image

The UI may change after time

Top comments (0)