Rebuilding the dotCMS Developer Site: A Behind-the-Scenes Look

Rebuilding the dotCMS Developer Site: A Behind-the-Scenes Look
Author image

Jorge Conde

Sales Engineer

Share this article on:

The dotCMS Developer Site is the go-to resource for developers working with dotCMS and integrating dotCMS into their projects. It provides documentation, API references, and technical guides—but as dotCMS has evolved, so have the needs of our developer community.

Recently, we completely refreshed the dotcms.com website with a modern look and better branding. With that major update, it became clear that our developer site needed a redesign too—both to stay on brand and to improve how developers access our content.

So, we set out to rebuild the developer site, focusing on better usability, modern design, and support for new content types like tutorials, videos, and blog posts.

Below is a preview of our new homepage:

screenshot.png

The Problems with the Old Site

Before we began the rebuild, we identified several key challenges:

  • Missing AI search: We introduced dotAI in dotCMS last year, which allows semantic searches. 

  • Outdated look and feel: With the recent redesign of dotcms.com, the dev site felt visually disconnected and it was clear we needed to align it with our refreshed branding.

  • Limited content types: Our team is building a lot of content such as tutorials, videos, and blog posts, but the site wasn’t designed to support this.

  • Readability and usability issues: The old site lacked spacing and typography refinements, making it harder to read. Developers also wanted dark mode support.

  • User experience challenges - Finding relevant content wasn’t as intuitive as it should be. The homepage didn’t surface enough headless developer content upfront.

With these issues in mind, we focused on creating a developer-first experience—one that’s faster, more modern, and content-rich.

Aligning with the New dotcms.com Brand

Since we recently refreshed dotcms.com, we wanted to ensure that the developer site:

  • Maintains a consistent design language: Fonts, colors, and layout should feel like an extension of the main site.

  • Feels modern and professional: Reflecting dotCMS’s growth as the leading Universal CMS.

  • Provides a seamless transition: Developers should feel like they’re still in the dotCMS ecosystem when moving between the marketing site and the developer site.

By keeping the same branding, typography, and user experience principles, we can offer a cohesive experience for all dotCMS users.

Implementing a Modern and Scalable Tech Stack

For the rebuild, we needed a fast, flexible, and scalable front-end framework. We chose Next.js, not only because it’s widely used in modern web development, but also because of the team’s familiarity with it. Having in-house expertise allows us to easily maintain and iterate on the codebase as needed.

Additionally, Next.js was a great fit because:

  • It works seamlessly with dotCMS’s headless architecture, allowing content to be fetched dynamically and pages to be edited directly from our Universal Visual Editor.

  • It enables hybrid static and dynamic rendering, improving performance.

  • It integrates well with AI tools, making it easy to generate user interface (UI) components and layouts using AI-assisted development tools like v0.

  • It provides a platform to showcase our JavaScript SDKs, helping developers understand how to use them effectively.

  • It deploys seamlessly on Vercel, ensuring fast global performance with built-in CDN capabilities.

dotCMS remains the core CMS powering the site, of course, managing all documentation, tutorials, and developer resources in a structured and scalable way. Additionally, leveraging our integrated CDN (dotCDN) ensures that pages load quickly and efficiently, no matter where developers are accessing them from.

By leveraging Next.js, Vercel, and dotCMS, we ensure that the dev site is high-performing, scalable, and easy to maintain while showcasing the power of dotCMS’s headless API capabilities.

Enhancing Developer Experience & Readability

A great developer site isn’t just about content—it’s about how that content is presented. We improved:

  • Typography and spacing: Easier to read with better font choices and line height adjustments.

  • Dark mode: A must-have for developers who prefer a high-contrast UI that’s easy on the eyes.

  • Homepage design: Surfacing key headless CMS content up front so developers find what they need faster.

Additionally, we integrated AI-powered search, making it easier to find documentation, troubleshoot issues, and navigate API references.

Below is a preview of our AI-powered chatbot in action:

screenshot (1).png

Expanding Content for Developers

To support our growing developer audience, we restructured the site to include:

  • 📚 More tutorials and guides: Step-by-step walkthroughs for common use cases.

  • 🎥 Video content: Developer-focused deep dives and instructional videos.

  • 📝 Developer blog and updates: A place for technical articles, best practices, and new feature updates.

Below is a preview of our documentation in dark mode (a work in progress):

screenshot (3).png

What’s Next?

We’re rolling out improvements gradually, starting with the homepage. Next steps include:

  • 🔍 More search and navigation refinements.

  • 🛠 Expanded API documentation with live playgrounds.

  • 💡 Community contributions & developer feedback mechanisms.

Check out the new site dev.dotcms.com and subscribe to our new developer newsletter, dotDEV, to stay in the loop on future updates and technical content from dotCMS.