Netlify Create framework support
Netlify Create is not framework-specific in any way and does not require using framework-specific libraries. Rather, it has certain requirements that websites built with virtually all modern frameworks can satisfy.
It's highly recommend to read How Netlify Create Works before diving further. In this article we assume that you're up to speed on content-driven development and working modes (local development vs. a hosted Netlify Create project).
# Requirements
To use Netlify Create with your framework, follow the below instructions to make your site editable and to configure how Netlify Create should run and deploy your website.
# Make your site editable
To run in any environment, including local development, you need the following:
- A valid configuration file (reference). Make sure to specify which content models represent pages, and what is their URL path.
- Support for Content Reload (guide). This typically requires adding code to your site. See specific framework guides for
- [Optional] Annotations: HTML data attributes marking where in the page content objects and their fields are found. Annotations enable visual highlighting in the editor.
When content changes are made by anyone, Netlify Create detects the change automatically. Then, gracefully reloading on-page content without a full-page reload is essential for the user experience.
Reloading can be handled by the visual editor in "fully-automatic" mode for certain frameworks (currently Next.js, Angular and Gatsby). For other frameworks, your website's code should implement a listener on content change events and efficiently refresh the page contents. These events are only fired when working with the visual editor - your production site is never affected.
In each of the framework guides below we link to a concrete code example and explain how content reload was implemented in it.
# Configure how to run your website
When you create a hosted Netlify Create Project (either by choosing a starter or importing an existing repository), Netlify Create runs your website in a cloud-based container. Inside that container, we run your site's server.
Your website server should be run in your web framework's development mode, in which any code changes trigger a refresh and any statically-generated pages can be re-created on content changes.
For a few frameworks (currently Next.js, Angular and Gatsby) the needed configuration is all set by default. For others, see the guide to bringing your own framework.
# Configure how to deploy your live website
If you're using Managed Hosting, you also need to include a Netlify configuration file netlify.toml in your repository. All starters & examples include this file.
# Framework-specific notes
- Angular: how to use Netlify Create with an Angular-based website
- Bring your own: how to use Netlify Create with any framework
- Hydrogen: how to use Netlify Create with a website that uses Shopify’s Hydrogen
- Next.js: how to use Netlify Create with a Next.js-based website
- Nuxt 3: how to use Netlify Create with a Nuxt 3-based website
- SvelteKit: how to use Netlify Create with a SvelteKit-based website
Did you find this doc useful?
Your feedback helps us improve our docs.