# Extend with code

Extend and customize your Redocly project with React components, API functions, custom styling, and advanced integrations.

## Development and integration

**React pages**

Create custom pages with React components for dynamic, interactive content and layouts.

**Page templates**

Create custom page layouts and templates for consistent design patterns.

**npm libraries**

Import and use external npm packages to add functionality to your project.

**Built-in components**

Use and extend Redocly's built-in React components in your custom pages and templates.

**Source maps**

Enable source maps for easier debugging of custom components and functions.

## Advanced components

**Custom Markdoc tags**

Build reusable Markdoc tags to extend your content authoring capabilities.

**Markdoc variables**

Use variables to create dynamic, configurable content across your project.

**Attribute resolvers**

Transform and process Markdoc tag attributes with custom resolvers.

**Custom functions**

Create custom Markdoc functions for dynamic content generation and processing.

## Component customization

**Eject components**

Customize built-in components by ejecting and modifying them to fit your needs.

**Root layout**

Customize the root application layout for complete control over your project structure.

## Configuration

**Static assets**

Add static files to your project with predictable URLs that survive deployments.

**Theme static assets**

Add custom static assets to your theme for branding and functionality.

**Color mode images**

Display different images based on light or dark color mode preferences.

**Request values**

Configure custom request values for API documentation and interactive features.

## API integration

**API functions**

Build serverless functions to extend your project with custom APIs and data processing.

## Get started with customization

1. **Start simple** - Create your first [React page](/docs/realm/customization/create-react-page) to understand the basics
2. **Use built-in components** - Learn to use [built-in components](/docs/realm/customization/react-components) in your pages
3. **Create components** - Build [custom Markdoc tags](/docs/realm/customization/build-markdoc-tags) for reusable content elements
4. **Advanced customization** - [Eject components](/docs/realm/customization/eject-components) for complete control over styling and behavior
5. **Add functionality** - Build [API functions](/docs/realm/customization/api-functions/create-api-functions) for server-side features

## Resources

- **[API functions reference](/docs/realm/customization/api-functions/api-functions-reference)** - Complete guide to available serverless function capabilities for extending your project with custom APIs
- **[Built-in React components](/docs/realm/customization/react-components/list)** - Browse and learn to use Redocly's built-in React components in your custom pages and templates
- **[Eject components tutorial](/docs/realm/customization/eject-components/eject-components-tutorial)** - Step-by-step hands-on guide to ejecting and customizing built-in components
- **[Markdoc attribute resolvers](/docs/realm/customization/markdoc-attribute-resolvers)** - Advanced Markdoc customization using attribute resolvers for tag processing and transformation