Blog
Product Releases
July 1, 2025
9 min read

Kong's New Developer Portal: Modern UX Meets Developer Self-Service

Michael Field
Principal, Technical Product Marketing Manager, Kong

We just GA’d the new Kong Konnect Developer Portal as part of our broader API discovery initiative, and it represents a fundamental rethink of what a developer portal should be. Built from the ground up on a modern tech stack, it delivers both the simplicity teams need to get started fast and the deep customization capabilities required for professional, on-brand experiences.

TL;DR: The new Kong Developer Portal delivers professional, branded API experiences in minutes with our starter template, then lets you customize every detail through our intuitive MDC framework and live portal editor. Modern spec rendering, self-service workflows, and enterprise-grade access controls mean developers actually want to use your portal. No more choosing between easy and powerful: Kong Konnect's new Developer Portal delivers both.

The developer portal dilemma

The developer portal landscape forces an impossible choice.

On one side, you have modern documentation platforms that developers love with clean interfaces, great authoring experiences, and seamless workflows. But they're disconnected from your API runtime, lacking self-service access capabilities, usage analytics, and enterprise controls. They're beautiful documentation sites, not true developer portals.

On the other side, traditional API management platforms bundle portals that provide deep runtime integration and enterprise features. The catch? Their portals come in two equally frustrating flavors: bare-bones templates with minimal customization, or full-featured offerings built on legacy content management systems (CMS) like Drupal. The latter were cutting-edge a decade ago but now feel clunky and dated, bringing their own baggage like complex theming systems, plugin dependencies, and constant security patching.

Option 1: Beautiful but disconnected – Modern documentation platforms that developers actually enjoy using. Clean interfaces, markdown-based authoring, instant previews. But they're islands. No connection to your API runtime means no self-service key management, no real usage analytics, and no enterprise access controls.

Option 2: Integrated but compromised – Traditional APIM portals promise runtime integration, but force yet another choice:

  • Simple but limited: Pick your primary and secondary colors, upload a logo, and you're done. Great for getting started, but good luck making it truly yours. Want to add a custom component? Restructure the navigation? Add interactive elements? Sorry, that's not supported.
  • Powerful but painful: Full customization through legacy CMSs that require wrestling with complex templating languages, raw HTML/CSS, and what essentially becomes a custom web application. The flexibility is there, but the developer experience is brutal and long-term maintenance becomes a nightmare.

The available options have left teams frustrated.

Platform engineers, typically backend-focused without dedicated frontend resources, want to ship a brand-compliant portal quickly without working with raw HTML/CSS that inevitably becomes a maintenance nightmare when frontend engineers arrive to polish things up.

Marketing wants pixel-perfect brand compliance.

Developers just want to find and use APIs without friction.

The new Kong Developer Portal breaks this pattern. As we'll show in our walkthrough, you can go from zero to a professionally branded portal in minutes, then progressively enhance it with deep customizations as needed. No more compromises: beautiful, integrated, and customizable — without needing a team of frontend developers.

Built on modern foundations

We chose to build on the latest versions of Nuxt, Vue.js, and TypeScript and contributed back to these open-source ecosystems along the way. This isn't just about using the latest frameworks; it's about delivering real benefits:

  • Performance: Server-side rendering, smart caching (swrv) and prefetching along with contents delivered through edge networks, making pages load faster
  • Developer experience: Instant live preview and autocompletions allow for a powerful, built-in portal editor experience
  • Component architecture: Reusable, composable components that make customization intuitive
  • Future-proof: Active ecosystems and strong community support

The magic of MDC: Markdown components

At the heart of our customization system are Markdown Components (MDC). MDC is a Vue/Nuxt-based framework that makes creating rich, interactive content as simple as writing Markdown. But this isn't your standard Markdown; it's Markdown with superpowers.

How MDC works

Think of MDC as bringing component-based development to content creation. Portal pages are made up of multiple, pre-built MDC building blocks that are as easy to parse as any Markdown document. Here's how it breaks down:

  • Component blocks ::component-name
  • Component configuration --- YAML frontmatter ---
    • Controls the component's appearance and behavior
  • Markdown slots #slot-name
    • Named areas where you insert your actual content

Let's see this in action with a real example:

::page-section
---
full-width: true
background-color: "#FFFEF8"
---
  ::page-hero
  ---
  title-font-size: "clamp(36px, 5vw, 64px)"
  title-line-height: "clamp(42px, 5vw, 72px)"
  title-font-weight: "700"
  title-tag: "h1"
  description-font-size: "clamp(16px, 3vw, 24px)"
  description-line-height: "clamp(24px, 3vw, 32px)"
  description-font-weight: "400"
  text-align: "center"
  image:
    position: "bottom"
    src: "https://imgur.com/C6A0H4v.png"
  ---
  #title
  Kong API Dev Portal
  #description
  Code. Collaborate. Innovate. Your Gateway to Development Excellence.
  #actions
    ::button
    ---
    size: "large"
    to: "/getting-started"
    ---
    Get started
    ::
  ::
::

Here we're using two components:

  1. ::page-section - A container that spans the full width with a light background
  2. ::page-hero - A hero section nested inside, with customized typography and an image

The YAML frontmatter between the --- markers is where you can configure fonts, sizes, colors, and layout without touching CSS. The #title, #description, and #actions slots are where your actual content goes.

The result? A professional hero section with responsive typography, properly positioned image, and interactive button, all from readable Markdown. The image below shows this exact code in our Portal Editor with live preview.

Snippets: Reusable custom components

While MDC provides a rich set of pre-built components, the real power comes with Snippets: your own reusable, parameterized components that work across your entire portal.

Think of Snippets as your component library. Create once, use everywhere. Need a custom call-to-action that appears on multiple pages? Build it as a Snippet. Want consistent API authentication instructions across your docs? Snippet. Complex pricing tables that need regular updates? You guessed it, Snippet.

Here's what makes Snippets powerful:

Dynamic Parameters: Build flexible Snippets with defaults that can be adapted to match the context. Define default values in the Snippet, then override them wherever it's used.

Let's say you create an api-quickstart Snippet with defaults:

# In the Snippet (with front matter defaults)
---
apiName: "Our API"
authMethod: "API Key"
docsLink: "/authentication"
---

Get started with {{ $doc.snippet.apiName }} using {{ $doc.snippet.authMethod }}. 
See our [authentication guide]({{ $doc.snippet.docsLink }}) for details.

Then customize it per API:

# In your Payments API page
::snippet
---
name: api-quickstart
data:
  apiName: "Payments API"
  authMethod: "OAuth 2.0"
  docsLink: "/payments/oauth"
---
::

One Snippet, infinite variations. Update the template once, and every API's quickstart guide updates automatically while keeping their specific details intact.

Publishing and privacy Controls: Snippets support both visibility states (public/private) and publishing states (published/unpublished), giving you granular control over what developers see and when.

Private snippets only appear for authenticated users, making it perfect for things like beta features, internal documentation, or partner-specific content.

The publish/unpublish toggle enables proactive content management. Pre-stage a maintenance banner across all pages but keep it unpublished. When downtime hits, one click publishes the alert portal-wide. No scrambling to update individual pages during an incident.

Nested composition: Snippets can include other Snippets and any MDC components. Build complex layouts by composing smaller, focused Snippets together.

The beauty is maintenance at scale. Update a Snippet once, and every page using it updates automatically. No more hunting through dozens of pages to change that support email or update your onboarding flow. This is how you build a portal that scales with your API program.

Portal Editor: Real-time customization

Gone are the days of edit-save-refresh-evaluate-repeat. Our Portal Editor provides a side-by-side experience where you write MDC on the left and see live updates on the right. It's like having a design tool and CMS rolled into one.

The editor understands MDC syntax, providing autocomplete for components and their properties. Made a mistake? The preview shows exactly what went wrong. Want to test mobile views? Switch viewport sizes instantly.

For teams with strict design requirements, you have the option to implement custom CSS. The editor provides full access to pre-built design tokens, exposed via CSS Custom Properties, letting you fine-tune every pixel while maintaining the benefits of the component system.

Kong's OpenAPI Renderer: Built different

We need to talk about API documentation. The standard Swagger UI that most portals use? It looks like it was designed in 2010 because, well, it was. API documentation doesn't have to be ugly or hard to navigate.

That's why we built our own spec renderer from scratch. It supports both OpenAPI 3.x and AsyncAPI specs (perfect for our Event Gateway), renders beautifully on any device, and includes features developers actually want:

  • Modern UI: Clean, intuitive interface that matches your portal's design
  • Try it built-in: Test endpoints directly from the documentation
  • Powerful search: Quickly find an endpoint from the specification, or a section in API documentation, with fuzzy search matching
  • Code generation: Copy ready-to-run code samples in multiple languages

The best part? We're open-sourcing it. The same renderer powers our Dev Portal, Service Catalog, and our own API docs. Soon, any developer will be able to use it in their projects.

Developer experience beyond the basics

A great portal is more than just good looks and documentation. The new Developer Portal delivers on the complete developer journey.

Developer registration and self-service

Developers can register, create applications, and obtain API keys, with or without manual approval, depending on your portal settings.

  • Configure auto-approval or manual review workflows
  • Set authentication strategy per application: key authentication, OpenID Connect, or through dynamic client registration
  • Require email verification or SSO authentication leveraging OIDC or SAML
  • Track usage and revoke access when needed
  • Leverage custom domains for professional, white-labeled experiences

Discovery and organization

As your API catalog grows, developers need tools to quickly find what they’re looking for:

  • Smart fuzzy search that handles misspelling and variations, searching across specs, operations, and even generic markdown documentation, which is essential for APIs without formal specifications
  • Custom attributes and filtering to organize your catalog. Add multiple values per attribute (e.g., region: [us-east, eu-west]) and use them to pre-filter API lists or provide dynamic filter sidebars

RBAC and privacy controls

Enterprise teams need granular control over who sees what:

  • Make certain pages visible only to authenticated users with page-level permissions
  • Take permission control a step further and enable RBAC. Assign individual developers roles or organize them into teams to determine which APIs are visible
  • Map users from external groups in a linked IdP to your portal teams

Professional communications

Every touchpoint matters. Customize the entire email experience to match your portal’s branding:

  • Modify email templates for each API lifecycle event, such as registration and API access approval
  • Automatically apply your logo and brand colors to all emails
  • Customize from/reply-to addresses with custom email domains

Auditing and analytics

The new portal provides analytics for both the portal owners and developers using the portal. This data provides actionable intelligence for improving your API program:

  • Portal owners can capture detailed audit logs and integrate with their SIEM solution over webhook
  • Portal owners can leverage advanced analytics filtered by application and/or API

From zero to portal: Implementation walkthrough

In the above walkthrough of Kong Konnect's new dev portal, we'll cover:

  1. Creating your first portal in Konnect
  2. Customizing the landing page with MDC
  3. Publishing an API with OpenAPI spec
  4. Setting up self-service registration

The Bottom Line

This is just the beginning. The new Developer Portal is now officially GA, but we’re not done here. We have an exciting and jam-packed roadmap, and we're actively building based on user feedback.

But honestly? What's available today already represents a massive leap forward for developer portals that no longer makes you choose between simple and powerful. Whether you need a portal live in the next hour or want to craft a completely custom experience, the combination of MDC components, live portal editing, and progressive customization has you covered.

Ready to see what a modern developer portal looks like? Schedule a demo with our in-house experts to learn how the new Kong Developer Portal can support your API program.

Unleash the power of APIs with Kong Konnect

Learn MoreGet a Demo
Topics:Developer Portal
|
Kong Konnect