FlexDoc
FlexDoc is a beautiful, highly customizable OpenAPI documentation generator designed to transform complex API specifications into intuitive, interactive documentation. Unlike traditional API documentation tools that produce static and often confusing interfaces, FlexDoc creates a developer-friendly experience that makes API exploration and integration straightforward.
Built with modern web technologies and designed with both API consumers and providers in mind, FlexDoc bridges the gap between technical accuracy and usability. Whether you're building a public API, internal microservices, or documenting legacy systems, FlexDoc adapts to your specific documentation needs with minimal configuration.
Key Features & Benefits
Beautiful UI
FlexDoc transforms technical OpenAPI specifications into visually appealing documentation that developers actually want to use. The modern interface incorporates thoughtful design principles that enhance readability and navigation.
With smooth animations and micro-interactions, the documentation feels responsive and engaging, encouraging exploration and reducing the learning curve for new API users.
Authentication & Security
For teams working with sensitive APIs, FlexDoc provides robust authentication options to protect your documentation. Choose between Basic or Bearer token authentication to ensure only authorized users can access your API details.
This is particularly valuable for internal APIs, partner-facing documentation, or any scenario where you need to restrict access to your API specifications.
Interactive Exploration
FlexDoc goes beyond static documentation by providing a fully interactive API explorer. Developers can test endpoints directly within the documentation interface, seeing real request and response examples.
This hands-on approach significantly accelerates the API learning process and reduces integration time, as developers can validate their understanding immediately without switching to separate tools.
Complete Customization
Your API documentation should reflect your brand identity. FlexDoc offers extensive theming capabilities that go beyond simple color changes, allowing you to customize typography, spacing, component styles, and more.
The theming system is designed to be intuitive yet powerful, enabling both simple brand alignment and sophisticated custom designs without requiring extensive CSS knowledge.
Framework Integration
FlexDoc seamlessly integrates with popular frameworks like NestJS and Express with minimal configuration. The integration process is designed to be straightforward, requiring just a few lines of code in most cases.
For teams using OpenAPI/Swagger specifications, FlexDoc works out of the box, automatically parsing your existing specs and transforming them into beautiful, interactive documentation.
Advanced Configuration
For teams with specific documentation requirements, FlexDoc provides granular configuration options. Control everything from the display of endpoints and parameters to authentication flows and response examples.
The configuration system is designed to be intuitive and well-documented, making it easy to tailor the documentation experience to your exact specifications without diving into source code.
Get FlexDoc Now
Access the source code on GitHub or install directly via npm to start building beautiful API documentation.
Integration Approaches
FlexDoc was designed with flexibility in mind, offering multiple integration paths depending on your project's architecture and requirements. Below are the three most common approaches to implementing FlexDoc in your application ecosystem.
React Component Integration
For frontend-focused teams or those building documentation portals, FlexDoc offers a standalone React component that can be embedded in any React application. This approach gives you complete control over where and how the documentation appears in your UI.
The React component accepts your OpenAPI specification directly and provides comprehensive theming options. This is ideal for scenarios where you want to:
- Embed API documentation within an existing developer portal
- Create a custom documentation experience that matches your product's UI
- Dynamically generate documentation based on user permissions or context
Implementation requires just a few lines of code after installing the @bluejeans/flexdoc-client package.
NestJS Framework Integration
For teams using NestJS, FlexDoc offers a dedicated module that integrates seamlessly with the NestJS ecosystem. This approach automatically extracts your API specification from your NestJS decorators and controllers, ensuring your documentation is always in sync with your actual API implementation.
The NestJS integration supports all FlexDoc features and can be configured through the module options. Key benefits include:
- Automatic synchronization between code and documentation
- Support for NestJS-specific features like guards, interceptors, and pipes
- Easy configuration through the familiar NestJS module system
- Authentication options to protect your API documentation
Setup is straightforward through the FlexDocModule.forRoot() method in your app module.
Express Framework Integration
For Express applications, FlexDoc provides a simple middleware that can be added to your Express app with minimal configuration. This approach is perfect for teams that want to add beautiful API documentation to existing Express applications without major changes to their codebase.
The Express integration works with any OpenAPI/Swagger specification, whether generated from code annotations or written manually. Key advantages include:
- Lightweight middleware that doesn't impact application performance
- Compatible with existing Express middleware and routing
- Support for authentication to protect sensitive API documentation
- Easy configuration through a simple options object
Implementation is as simple as calling setupFlexDoc(app, options) after your other middleware and routes.
Get Started Today
FlexDoc is open source and available on npm. Start using it in your project with just a few lines of code.
Configuration Philosophy
FlexDoc was built on the principle that API documentation should be both beautiful and functional without requiring extensive configuration. At the same time, we recognize that teams have unique branding and documentation requirements.
Configuration Categories
Visual Customization
- Theming: Light, dark, or custom color schemes
- Typography: Font families, sizes, and line heights
- Layout: Sidebar width, content spacing, and component positioning
- Branding: Custom logos, favicons, and brand colors
Functional Configuration
- Authentication: Basic or Bearer token protection
- Display Options: Endpoint grouping, request examples, and response formatting
- Behavior: Default expanded sections, try-it-out functionality
- Extensions: Custom JavaScript for analytics or enhanced functionality
Configuration Approaches
FlexDoc supports multiple configuration approaches to fit different team workflows:
1. Configuration Object
Pass a comprehensive options object when initializing FlexDoc. This is ideal for applications where configuration is determined at build/runtime.
2. Configuration File
Create a flexdoc.config.js file in your project root. This approach is perfect for teams that prefer configuration as code.
3. Environment Variables
Configure core options through environment variables. Ideal for deployment across different environments where configuration might vary.
4. UI Configuration
Some options can be configured directly through the UI by administrators, allowing for adjustments without redeployment.
FlexDoc's configuration system is designed to be intuitive yet powerful, with sensible defaults that work well for most projects while offering granular control when needed.