hp-square-hero

The leading open-source headless CMS. 
100% JavaScript / TypeScript and fully customizable. 

Manage any content. Anywhere.

hp-hero

Forever. The entire codebase is available on GitHub and maintained by hundreds of contributors.

Open Source

Easily customize the admin panel as well as the API. Extend your content management with custom plugins, in seconds.

Customizable

Consume the API from any client (React, Vue, Angular), mobile apps or even IoT devices, using REST or GraphQL.

RESTful or GraphQL

Extend the capabilities of Strapi with [Strapi Cloud](https://cloud.strapi.io/login), our fully managed platform or deploy on-premises, on your favorite public cloud or the PaaS of your choice. You’re in control, no lock-in. 

Self-hosted or Cloud

Get your backend done in minutes instead of weeks. 
Easily build customizable content API and use them with a modern tech stack.

Build apps fast.

hp-primary-desktop

Make a flexible data structure in 2 minutes.
Use our powerful features to customize your API.

How does it work?

No matter which data structure is the best for your business, you can easily define models and add relations to create rich layout experiences.

Step. 1

Effortlessly create content structures that flex to your needs.

Once you have created your content architecture, you can start telling engaging stories. Allow cross-functional teams to deliver content faster no matter your industries, use cases, locations, devices, and channels. 

Step. 2

Seamlessly write, edit and manage any content types.

Focus your talent on what matters. You can integrate individual best-in-class services by third-party vendors and connect any framework of your choice. 

Step. 3

Easily build apps and digital experiences without the distraction of CMS complexities.

You can use a standard RESTful API or GraphQL to query your content. Based on Apollo, our GraphQL plugin offers a full compatibility with the whole GraphQL ecosystem.

Step. 4

Consume Strapi API  from any client using REST or GraphQL.

Strapi Cloud, self-hosted servers, or popular cloud platforms, the choice is yours. Strapi can quickly be deployed on Strapi Cloud or on services such as AWS, Azure, GCP and others or locally using Docker.


Step. 5

Deploy on Strapi Cloud or on any cloud platforms.


## The best Headless CMS for Gatsby

Use Strapi to maintain and manage your Gatsby static site

Blazing fast combination: Strapi is powered by a modern technology stack using Node.js – it's fast. Really fast. Plus, it can deliver your content with GraphQL.

Gatsby automates code-splitting, image optimization, inlining critical styles, lazy-loading, and prefetching resources, and more to ensure your site is fast.

## Strapi + Gatsby benefits

Being a static site generator brings a lot of advantages: **Performance**, **security**, **lower cost of scaling** but also an **excellent developer experience**.

Gatsby brings **huge benefits to content creators and developers** by helping to solve many of the challenges with the **headless approach**.

> Strapi provides a perfect solution as a source for Gatsby’s static markup generation. Whether building a static site, or a more dynamic app/website Strapi has you covered with its flexibility of content types, plugins, and customization. 

*Chris, GatsbyJS developer.*




## Automate builds using Webhooks

Take advantage of the built-in [webhook](/blog/webhooks) feature that will allow you to automatically build your Gatsby project upon the update of your data.

Instants after you made modifications in Strapi, **your new content is live**.

![webhooks-screenshot](/uploads/webhooks-screenshot_8eefc50bee.png)

## Getting Started with Gatsby

Follow the integration guide from our documentation to see how to consume Strapi's Content Type's API from Gatsby. As a **[Static Site Generator](https://www.staticgen.com/), Gatsby** will fetch your content from Strapi at build time. Therefore, you need to configure Gatsby to communicate with your Strapi application using the following CLI command. 

```jsx
yarn add gatsby-source-strapi
```

```jsx
module.exports = {
  plugins: [
    {
      resolve: "gatsby-source-strapi",
      options: {
        apiURL: process.env.STRAPI_API_URL || "http://localhost:1337",
        accessToken: process.env.STRAPI_TOKEN,
        collectionTypes: [
          {
            singularName: "restaurant",
            queryParams: {
              publicationState:
                process.env.GATSBY_IS_PREVIEW === "true" ? "preview" : "live",
              populate: {
                cover: "*",
                blocks: {
                  populate: "*",
                },
              },
            },
          },
          {
            singularName: "category
          }
        ],
      },
    },
  ],
}
```

Here is an example of the GraphQL API query  `./src/pages/index.js`

```jsx
import React from 'react';

import { StaticQuery, graphql } from 'gatsby';

const query = graphql`
  query {
    allStrapiRestaurant {
      edges {
        node {
          strapiId
          name
          description
        }
      }
    }
  }
`;

const IndexPage = () => (
  <StaticQuery
    query={query}
    render={data => (
      <ul>
        {data.allStrapiRestaurant.edges.map(restaurant => (
          <li key={restaurant.node.strapiId}>{restaurant.node.name}</li>
        ))}
      </ul>
    )}
  />
);

export default IndexPage;
```

You can use the [Gatsby Source Strapi plugin](https://github.com/strapi/gatsby-source-strapi)  for pulling documents into Gatsby from a Strapi API.




Gatsby is a blazing fast modern site generator for React.

Gatsby 

# Integrate Strapi with React for Efficient Content Management

## Introduction to Strapi and React

Strapi and React together form a powerful duo for creating dynamic, content-rich web applications. Strapi, an open-source headless CMS, offers a robust backend for managing content, while React, a popular JavaScript library, excels at building interactive user interfaces.

### Why Use Strapi with React?

By integrating Strapi with React, developers can build highly performant, scalable, and dynamic applications. Strapi's flexible API and content management features complement React's component-based architecture, enabling efficient data handling and rendering.

## Key Features

### Strapi Highlights:
- **Customizable API**: Tailor the API to your specific needs using Strapi's intuitive interface.
- **Roles & Permissions**: Manage user access with detailed permissions.
- **Media Library**: Easily handle and optimize media assets.
- **Internationalization**: Create multilingual websites effortlessly.
- **Authentication**: Secure your API with JWT or OAuth providers.

### React Highlights:
- **Component-Based**: Build encapsulated components that manage their own state.
- **Declarative**: Design interactive UIs with ease by describing how the UI should look.
- **Virtual DOM**: Efficiently update and render components.
- **Hooks**: Use state and other React features without writing classes.
- **Community & Ecosystem**: Leverage a vast ecosystem of libraries and tools.

## Best Practices for Using Strapi with React

1. **Data Fetching**: Use hooks like `useEffect` for fetching data from Strapi.
2. **State Management**: Utilize state management solutions like Redux or Context API.
3. **Authentication**: Implement JWT or OAuth for secure API interactions.
4. **Error Handling**: Ensure robust error handling for data fetching and API calls.
5. **Environment Variables**: Store sensitive information like API keys in environment variables.

## Getting Started

### Setting Up Strapi

1. **Install Strapi**:

```bash
npx create-strapi-app@latest my-project
```

2. **Configure Strapi**: Customize your API endpoints and content types in the Strapi admin panel.

### Integrating with React

1. **Install React**:

```bash
    npx create-react-app my-react-app
```

2. **Fetch Data from Strapi**:
    Use hooks like `useEffect` to fetch data from Strapi.

```javascript
import React, { useEffect, useState } from 'react';

function App() {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    fetch('http://localhost:1337/posts')
      .then(response => response.json())
      .then(data => setPosts(data));
  }, []);

  return (
    <div>
      {posts.data.map(post => (
        <article key={post.id}>
          <h2>{post.attributes.title}</h2>
          <p>{post.attributes.content}</p>
        </article>
      ))}
    </div>
  );
}

export default App;
```

3. **Display Content**: Render the fetched data in your React components as shown above.

Strapi and React together provide a seamless development experience for building dynamic and scalable web applications. By leveraging Strapi's CMS capabilities and React's UI flexibility, you can create efficient and maintainable applications. Follow best practices for data fetching and authentication to ensure a secure and effective integration.

For more details, visit the [Strapi documentation](https://strapi.io/documentation) and [React documentation](https://reactjs.org/docs).

React is a JavaScript library for building user interfaces. It is maintained by Facebook and a community of individual developers and companies.

React

Integrate Strapi with Next.js for Powerful Content Management

## Introduction to Strapi and Next.js

Strapi and Next.js together offer a powerful solution for creating dynamic, content-driven web applications. Strapi is a leading open-source headless CMS that provides a robust and flexible back-end for managing content, while Next.js is a popular React framework known for its performance and ease of use.

### Why Use Strapi with Next.js?

Combining Strapi with Next.js allows developers to create high-performance, scalable applications with ease. Strapi’s flexible API and content management capabilities complement Next.js’s fast, server-rendered, and statically generated pages.

## Key Features

### Strapi Highlights:
- **Customizable API**: Modify the API to suit your needs with Strapi's intuitive interface.
- **Roles & Permissions**: Control access with granular permissions.
- **Media Library**: Manage and optimize media assets effortlessly.
- **Internationalization**: Build multilingual websites with ease.
- **Authentication**: Secure API access with JWT or OAuth providers.

### Next.js Highlights:
- **Zero Configuration**: Automatically optimized for production.
- **Hybrid Rendering**: Supports both static and server-side rendering.
- **Incremental Static Regeneration**: Update static content without a rebuild.
- **TypeScript Support**: Full support out-of-the-box.
- **Fast Refresh**: Instant feedback for changes during development.

## Best Practices for Next.js Authentication with Strapi

Implementing authentication in your Next.js application using Strapi is straightforward and secure. Follow these best practices to ensure a robust authentication system:

1. **JWT Authentication**: Utilize JSON Web Tokens (JWT) for secure API communication.
2. **OAuth Providers**: Integrate with providers like Google, Facebook, or GitHub for social logins.
3. **Role-Based Access Control**: Define roles and permissions in Strapi to manage user access.
4. **Secure Password Storage**: Use bcrypt or another hashing algorithm to store passwords securely.
5. **Environment Variables**: Store sensitive information like API keys and secrets in environment variables.

## Getting Started

### Setting Up Strapi

1.**Install Strapi**:

```bash
npx create-strapi-app@latest my-project
```

2.**Configure Strapi**: Customize your API endpoints and content types through the Strapi admin panel.

### Integrating with Next.js

1.**Install Next.js**:

```bash
npx create-next-app my-next-app
```

2.**Fetch Data from Strapi**:
    Use Next.js’s data fetching methods (getStaticProps, getServerSideProps) to pull data from your Strapi API.

```javascript
export async function getStaticProps() {
  const res = await fetch('http://localhost:1337/posts');
  const posts = await res.json();
  return { props: { posts } };
}
```

3.**Display Content**: Render the fetched data in your Next.js components.

```javascript
function Blog({ posts }) {
  return (
    <div>
      {posts.data.map(post => (
        <article key={post.id}>
          <h2>{post.attributes.title}</h2>
          <p>{post.attributes.content}</p>
        </article>
      ))}
    </div>
  );
}
```

For an in-depth exploration of using Next.js, check out our [Epic Next.js YouTube playlist](https://www.youtube.com/watch?v=rvo-L0cP5NA&list=PL7Q0DQYATmvgONvIWsy34aDkAtcdjsQLE). This collection of videos covers everything from the basics to advanced techniques, helping you master Next.js development.

For more details, visit the [Strapi documentation](https://strapi.io/documentation) and [Next.js documentation](https://nextjs.org/docs).

Next.js is a minimalistic framework for server-rendered React applications as well as statically exported React apps.

Next.js

# Integrate Strapi with Nuxt.js for Advanced Content Management

## Introduction to Strapi and Nuxt.js

Combining Strapi with Nuxt.js provides a powerful solution for developing dynamic, content-driven web applications. Strapi is an open-source headless CMS that offers a robust backend for managing content, while Nuxt.js is a popular Vue.js framework known for its server-side rendering and static site generation capabilities.

### Why Use Strapi with Nuxt.js?

Integrating Strapi with Nuxt.js allows developers to create high-performance, scalable applications. Strapi’s flexible API and content management features complement Nuxt.js’s server-rendered and statically generated pages.

## Key Features

### Strapi Highlights:
- **Customizable API**: Tailor the API to meet your specific needs using Strapi’s intuitive interface.
- **Roles & Permissions**: Control user access with detailed permissions.
- **Media Library**: Easily manage and optimize media assets.
- **Internationalization**: Build multilingual websites effortlessly.
- **Authentication**: Secure your API with JWT or OAuth providers.

### Nuxt.js Highlights:
- **Server-Side Rendering (SSR)**: Improve SEO and performance with SSR.
- **Static Site Generation (SSG)**: Generate static websites for faster load times.
- **Vue.js Integration**: Leverage the power of Vue.js for building interactive interfaces.
- **Modular Architecture**: Extend functionality with Nuxt.js modules.
- **Automatic Code Splitting**: Optimize loading times with automatic code splitting.

## Best Practices for Using Strapi with Nuxt.js

1. **Data Fetching**: Use Nuxt.js’s `asyncData` or `fetch` hooks to fetch data from Strapi.
2. **State Management**: Utilize Vuex for managing application state.
3. **Authentication**: Implement JWT or OAuth for secure API interactions.
4. **Error Handling**: Ensure robust error handling for data fetching and API calls.
5. **Environment Variables**: Store sensitive information like API keys in environment variables.

## Getting Started

### Setting Up Strapi

1. **Install Strapi**:
    ```bash
    npx create-strapi-app@latest my-project
    ```
2. **Configure Strapi**: Customize your API endpoints and content types through the Strapi admin panel.

### Integrating with Nuxt.js

1. **Install Nuxt.js**:
    ```bash
    npx create-nuxt-app my-nuxt-app
    ```
2. **Fetch Data from Strapi**:
    Use Nuxt.js’s `asyncData` to fetch data from Strapi.

    ```javascript
    export default {
      async asyncData({ $axios }) {
        const posts = await $axios.$get('http://localhost:1337/posts');
        return { posts };
      }
    }
    ```

3. **Display Content**: Render the fetched data in your Nuxt.js components.

    ```html
    <template>
      <div>
        <div v-for="post in posts.data" :key="post.id">
          <h2>{{ post.attributes.title }}</h2>
          <p>{{ post.attributes.content }}</p>
        </div>
      </div>
    </template>

    <script>
    export default {
      props: {
        posts: Array
      }
    }
    </script>
    ```

Strapi and Nuxt.js together offer a seamless development experience for building dynamic and scalable web applications. By leveraging Strapi's CMS capabilities and Nuxt.js’s powerful framework, you can create efficient and maintainable applications. Follow best practices for data fetching and authentication to ensure a secure and effective integration.

For more details, visit the [Strapi documentation](https://strapi.io/documentation) and [Nuxt.js documentation](https://nuxtjs.org/docs).

Nuxt.js is a free and open-source web application framework based on Vue.js, Node.js, Webpack, and Babel.js.

Nuxt.js

# Integrate Strapi with Angular for Effective Content Management

## Introduction to Strapi and Angular

Combining Strapi with Angular provides a powerful solution for developing dynamic, content-driven web applications. Strapi, an open-source headless CMS, offers a robust backend for managing content, while Angular, a popular framework by Google, excels at building efficient and scalable web applications.

### Why Use Strapi with Angular?

Integrating Strapi with Angular allows developers to create high-performance, scalable applications. Strapi’s flexible API and content management capabilities complement Angular’s component-based architecture and powerful features for building complex applications.

## Key Features

### Strapi Highlights:
- **Customizable API**: Modify the API to fit your specific requirements using Strapi’s intuitive interface.
- **Roles & Permissions**: Control access with detailed permissions.
- **Media Library**: Manage and optimize media assets easily.
- **Internationalization**: Build multilingual websites effortlessly.
- **Authentication**: Secure API access with JWT or OAuth providers.

### Angular Highlights:
- **Component-Based Architecture**: Create encapsulated components that manage their own state.
- **Two-Way Data Binding**: Simplifies the process of data binding between the model and view.
- **Dependency Injection**: Improves code maintainability and reusability.
- **Reactive Programming**: Use RxJS for handling asynchronous data streams.
- **CLI**: Powerful Angular CLI for project scaffolding and management.

## Best Practices for Using Strapi with Angular

1. **Data Fetching**: Use Angular’s `HttpClient` module to fetch data from Strapi.
2. **State Management**: Utilize services and state management libraries like NgRx.
3. **Authentication**: Implement JWT or OAuth for secure API interactions.
4. **Error Handling**: Ensure robust error handling for data fetching and API calls.
5. **Environment Variables**: Store sensitive information like API keys in environment variables.

## Getting Started

### Setting Up Strapi

1. **Install Strapi**:
    ```bash
    npx create-strapi-app@latest my-project
    ```
2. **Configure Strapi**: Customize your API endpoints and content types through the Strapi admin panel.

### Integrating with Angular

1. **Install Angular CLI**:
    ```bash
    npm install -g @angular/cli
    ng new my-angular-app
    ```
2. **Fetch Data from Strapi**:
    Use Angular’s `HttpClient` to fetch data from Strapi.

    ```typescript
    import { HttpClient } from '@angular/common/http';
    import { Component, OnInit } from '@angular/core';

    @Component({
      selector: 'app-root',
      template: `
        <div *ngFor="let post of posts">
          <h2>{{ post.attributes.title }}</h2>
          <p>{{ post.attributes.content }}</p>
        </div>
      `
    })
    export class AppComponent implements OnInit {
      posts: any[] = [];

      constructor(private http: HttpClient) {}

      ngOnInit() {
        this.http.get('http://localhost:1337/posts').subscribe((data: any) => {
          this.posts = data.data;
        });
      }
    }
    ```

3. **Display Content**: Render the fetched data in your Angular components as shown above.

Integrating Strapi with Angular provides a seamless development experience for building dynamic and scalable web applications. By leveraging Strapi's CMS capabilities and Angular's robust framework, you can create efficient and maintainable applications. Follow best practices for data fetching and authentication to ensure a secure and effective integration.

For more details, visit the [Strapi documentation](https://strapi.io/documentation) and [Angular documentation](https://angular.io/docs).

Angular is a platform for building mobile and desktop web applications.

Angular

Manage your Flutter mobile application content with a powerful headless CMS.

## The easiest way to manage your content

Strapi enables content-rich experiences to be created, managed and exposed to any digital product, channel or device.
Strapi is powered by a modern technology stack using Node.js – it's fast. Really fast.

Flutter is a cross-platform UI toolkit that is designed to allow code reuse across operating systems such as iOS and Android, while also allowing applications to interface directly with underlying platform services.

## [Flutter](https://flutter.dev/) has a lot of benefits

Developed by Google, Flutter is an open-source UI toolkit for building mobile applications.

1. **Fast development**: Paint your app to life in milliseconds with Stateful Hot Reload. Use a rich set of fully-customizable widgets to build native interfaces in minutes.
2. **Expressive and flexible UI **: Quickly ship features with a focus on native end-user experiences. Layered architecture allows for full customization, which results in incredibly fast rendering and expressive and flexible designs.
3. **Native performances**: Flutter’s widgets incorporate all critical platform differences such as scrolling, navigation, icons and fonts, and your Flutter code is compiled to native ARM machine code using Dart's native compilers.

## Strapi, the best fit

The out-of-the-box Strapi features allow you to get up-and-running in no time:

1. **Single types**: Create one-off pages that have a unique content structure
2. **Customizable API**: With Strapi, you can just hop in your code editor and edit the code to fit your API to your needs.
3. **Integrations**: Strapi supports integrations with Cloudinary, SendGrid, Algolia, and others.
4. **Editor interface**: The editor allows you to pull in dynamic blocks of content.
5. **Authentication**: Secure and authorize access to your API with JWT or providers.


Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase.

Flutter

Connect your favorite databases, frontend frameworks, or static site generators. Choose where you want to host your websites. Integrate with your favorite tools, and work with the best of each world. No vendor lock-in.

Manage any content. Anywhere.

The leading open-source headless CMS. 100% JavaScript / TypeScript and fully customizable.

The leading open-source headless CMS.
100% JavaScript / TypeScript and fully customizable.