{"ast":{"$$mdtype":"Tag","name":"article","attributes":{},"children":[{"$$mdtype":"Tag","name":"Heading","attributes":{"level":1,"id":"extend-with-code","__idx":0},"children":["Extend with code"]},{"$$mdtype":"Tag","name":"ConfigOptionRequirements","attributes":{"products":["Redoc","Revel","Reef","Realm"],"plans":["Pro","Enterprise","Enterprise+"]},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Extend and customize your Redocly project with React components, API functions, custom styling, and advanced integrations."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"development-and-integration","__idx":1},"children":["Development and integration"]},{"$$mdtype":"Tag","name":"Cards","attributes":{"columns":2,"cardMinWidth":240},"children":[{"$$mdtype":"Tag","name":"Card","attributes":{"title":"React pages","icon":"brands react","imagePosition":"start","iconPosition":"auto","layout":"vertical","align":"start","variant":"filled","to":"/docs/realm/customization/create-react-page"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Create custom pages with React components for dynamic, interactive content and layouts."]}]},{"$$mdtype":"Tag","name":"Card","attributes":{"title":"Page templates","icon":"table-layout","imagePosition":"start","iconPosition":"auto","layout":"vertical","align":"start","variant":"filled","to":"/docs/realm/customization/custom-page-templates"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Create custom page layouts and templates for consistent design patterns."]}]},{"$$mdtype":"Tag","name":"Card","attributes":{"title":"npm libraries","icon":"brands npm","imagePosition":"start","iconPosition":"auto","layout":"vertical","align":"start","variant":"filled","to":"/docs/realm/customization/import-npm-library"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Import and use external npm packages to add functionality to your project."]}]},{"$$mdtype":"Tag","name":"Card","attributes":{"title":"Built-in components","icon":"puzzle-piece","imagePosition":"start","iconPosition":"auto","layout":"vertical","align":"start","variant":"filled","to":"/docs/realm/customization/react-components"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Use and extend Redocly's built-in React components in your custom pages and templates."]}]},{"$$mdtype":"Tag","name":"Card","attributes":{"title":"Source maps","icon":"map","imagePosition":"start","iconPosition":"auto","layout":"vertical","align":"start","variant":"filled","to":"/docs/realm/customization/enable-source-maps"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Enable source maps for easier debugging of custom components and functions."]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"advanced-components","__idx":2},"children":["Advanced components"]},{"$$mdtype":"Tag","name":"Cards","attributes":{"columns":2,"cardMinWidth":240},"children":[{"$$mdtype":"Tag","name":"Card","attributes":{"title":"Custom Markdoc tags","icon":"tags","imagePosition":"start","iconPosition":"auto","layout":"vertical","align":"start","variant":"filled","to":"/docs/realm/customization/build-markdoc-tags"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Build reusable Markdoc tags to extend your content authoring capabilities."]}]},{"$$mdtype":"Tag","name":"Card","attributes":{"title":"Markdoc variables","icon":"square-root-variable","imagePosition":"start","iconPosition":"auto","layout":"vertical","align":"start","variant":"filled","to":"/docs/realm/customization/markdoc-variables"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Use variables to create dynamic, configurable content across your project."]}]},{"$$mdtype":"Tag","name":"Card","attributes":{"title":"Attribute resolvers","icon":"gear","imagePosition":"start","iconPosition":"auto","layout":"vertical","align":"start","variant":"filled","to":"/docs/realm/customization/markdoc-attribute-resolvers"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Transform and process Markdoc tag attributes with custom resolvers."]}]},{"$$mdtype":"Tag","name":"Card","attributes":{"title":"Custom functions","icon":"function","imagePosition":"start","iconPosition":"auto","layout":"vertical","align":"start","variant":"filled","to":"/docs/realm/customization/build-custom-function"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Create custom Markdoc functions for dynamic content generation and processing."]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"component-customization","__idx":3},"children":["Component customization"]},{"$$mdtype":"Tag","name":"Cards","attributes":{"columns":2,"cardMinWidth":240},"children":[{"$$mdtype":"Tag","name":"Card","attributes":{"title":"Eject components","icon":"wrench","imagePosition":"start","iconPosition":"auto","layout":"vertical","align":"start","variant":"filled","to":"/docs/realm/customization/eject-components"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Customize built-in components by ejecting and modifying them to fit your needs."]}]},{"$$mdtype":"Tag","name":"Card","attributes":{"title":"Root layout","icon":"square-root","imagePosition":"start","iconPosition":"auto","layout":"vertical","align":"start","variant":"filled","to":"/docs/realm/customization/eject-root-layout"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Customize the root application layout for complete control over your project structure."]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"configuration","__idx":4},"children":["Configuration"]},{"$$mdtype":"Tag","name":"Cards","attributes":{"columns":2,"cardMinWidth":240},"children":[{"$$mdtype":"Tag","name":"Card","attributes":{"title":"Static assets","icon":"folder","imagePosition":"start","iconPosition":"auto","layout":"vertical","align":"start","variant":"filled","to":"/docs/realm/customization/static-assets"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Add static files to your project with predictable URLs that survive deployments."]}]},{"$$mdtype":"Tag","name":"Card","attributes":{"title":"Theme static assets","icon":"folder","imagePosition":"start","iconPosition":"auto","layout":"vertical","align":"start","variant":"filled","to":"/docs/realm/customization/theme-static-assets"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Add custom static assets to your theme for branding and functionality."]}]},{"$$mdtype":"Tag","name":"Card","attributes":{"title":"Color mode images","icon":"image","imagePosition":"start","iconPosition":"auto","layout":"vertical","align":"start","variant":"filled","to":"/docs/realm/customization/color-mode-images"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Display different images based on light or dark color mode preferences."]}]},{"$$mdtype":"Tag","name":"Card","attributes":{"title":"Request values","icon":"server","imagePosition":"start","iconPosition":"auto","layout":"vertical","align":"start","variant":"filled","to":"/docs/realm/customization/configure-request-values"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Configure custom request values for API documentation and interactive features."]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"api-integration","__idx":5},"children":["API integration"]},{"$$mdtype":"Tag","name":"Cards","attributes":{"columns":2,"cardMinWidth":240},"children":[{"$$mdtype":"Tag","name":"Card","attributes":{"title":"API functions","icon":"code","imagePosition":"start","iconPosition":"auto","layout":"vertical","align":"start","variant":"filled","to":"/docs/realm/customization/api-functions"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Build serverless functions to extend your project with custom APIs and data processing."]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"get-started-with-customization","__idx":6},"children":["Get started with customization"]},{"$$mdtype":"Tag","name":"ol","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Start simple"]}," - Create your first ",{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/customization/create-react-page"},"children":["React page"]}," to understand the basics"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Use built-in components"]}," - Learn to use ",{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/customization/react-components"},"children":["built-in components"]}," in your pages"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Create components"]}," - Build ",{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/customization/build-markdoc-tags"},"children":["custom Markdoc tags"]}," for reusable content elements"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Advanced customization"]}," - ",{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/customization/eject-components"},"children":["Eject components"]}," for complete control over styling and behavior"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Add functionality"]}," - Build ",{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/customization/api-functions/create-api-functions"},"children":["API functions"]}," for server-side features"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"resources","__idx":7},"children":["Resources"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/customization/api-functions/api-functions-reference"},"children":["API functions reference"]}]}," - Complete guide to available serverless function capabilities for extending your project with custom APIs"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/customization/react-components/list"},"children":["Built-in React components"]}]}," - Browse and learn to use Redocly's built-in React components in your custom pages and templates"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/customization/eject-components/eject-components-tutorial"},"children":["Eject components tutorial"]}]}," - Step-by-step hands-on guide to ejecting and customizing built-in components"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/customization/markdoc-attribute-resolvers"},"children":["Markdoc attribute resolvers"]}]}," - Advanced Markdoc customization using attribute resolvers for tag processing and transformation"]}]}]},"frontmatter":{"products":["Redoc","Revel","Reef","Realm"],"plans":["Pro","Enterprise","Enterprise+"]},"tagList":["card","cards","configOptionRequirements"],"title":"Extend with code","lastModified":"2026-10-01T23:00:57.000Z"}