DEV Community

Cover image for Vibecoding a Mobile-Friendly Umbraco backoffice experience
Luuk Peters
Luuk Peters

Posted on

Vibecoding a Mobile-Friendly Umbraco backoffice experience

One of the pain points of the new backoffice introduced in Umbraco 14, is that the backoffice is not mobile-friendly. This issue has been raised in this discussion on GitHub.

As of Umbraco 16, the experience on a mobile device is still far from usable. Buttons and navigation elements are either inaccessible or too small to interact with properly. Sure, you can switch your browser to “desktop mode,” but then the entire interface becomes tiny and awkward to use.

Now, I don’t expect every complex application to be perfectly optimized for mobile. Some things make sense only in a desktop context. But the lack of mobile usability makes even small edits or urgent fixes on the go impossible. And sometimes, that’s exactly what you need: just a quick update while you’re away from your laptop.

That got me thinking:

Since Umbraco 14, we have the Management API that technically allows us to build a completely different backoffice experience if we wanted to. What if we built a lightweight, mobile-focused backoffice—not with every feature, but just the essentials for content editing and publishing?

Vibecoding a Proof of Concept

So I decided to experiment. I started vibecoding with Claude, armed with access to an Umbraco MCP, the source code, and the documentation. The goal was clear:

  • Browse the content tree easily
  • Edit content and media
  • Save and publish changes
  • All in a mobile-friendly layout

Here’s what came out of it:

POC in action

Some highlights of the prototype:

  • Browsing and selecting content happens in a modal to have the best overview.
  • Navigation elements are sized and spaced for mobile.
  • The functionality is deliberately minimal: save and publish only.

Why This Matters

This proof of concept isn’t about replacing the full Umbraco backoffice. It’s about reimagining what’s possible with the Management API and showing how a streamlined “editor on the go” could work.

There are still plenty of challenges to solve:

  • Handling complex property types like Blocks or Nested Content
  • Creating new content from scratch
  • Permissions and user flows

But even in its rough state, this little POC proves that a mobile-friendly backoffice is possible. And more importantly, it sparks inspiration: what if the future of Umbraco included a dedicated “mobile backoffice mode” built right into core?

For now, this vibecoded prototype shows that with a bit of creativity—and the power of the Management API—you can start bridging the gap.

Top comments (0)