
### Install Autolayout package

Reference:[ https://github.com/zesty-io/react-autolayout](https://github.com/zesty-io/react-autolayout)​

```
npm install @zesty-io/react-autolayout
```

### Ensure Zesty is integrated to your React app

The AutoLayout package expects a content object from the Zesty toJSON API. If that is not configured, see these references for configuration:

Please review this doc to ensure your setup is integrated properly: 
[Manually integrating a Next.js project to Zesty content](/docs/tools-and-resources/integrations/nextjs/manually-integrating-a-nextjs-project-to-zesty-content/)​


### AutoLayout Component

Here is an example of an AutoLayout component which manually maps through the custom components in the React project to the components built in the Zesty Layouts App


**QUICKSTART**

```
Add this to the top of your file
import { AutoLayout } from "@zesty-io/react-autolayout";
// Add this into your JSX body
<AutoLayout content={content} />s
```

Here is a full example snippet of running AutoLayout and mapping them to your own custom components.

See more custom component example here[ https://nextjs-marketing-nine.vercel.app/layouts/](https://nextjs-marketing-nine.vercel.app/layouts/)​

```
import React from "react";
import { AutoLayout } from "@zesty-io/react-autolayout";
import { CustomTextarea } from "./CustomTextarea";
import { CustomColumn } from "./CustomColumn";
import { CustomRow } from "./CustomRow";
export default function Page({ content }) {
<AutoLayout content={content} components={{
"wysiwyg_basic": CustomTextarea,
"text": CustomText,
"column": CustomColumn,
"row": CustomRow,
"design": CustomDesign,
"link": CustomLink
}} />
}


<h3>Install Autolayout package</h3><p>Reference:<a href="https://github.com/zesty-io/react-autolayout"> https://github.com/zesty-io/react-autolayout</a>​</p><pre><code>npm install @zesty-io/react-autolayout</code></pre><h3>Ensure Zesty is integrated to your React app</h3><p>The AutoLayout package expects a content object from the Zesty toJSON API. If that is not configured, see these references for configuration:</p><p>Please review this doc to ensure your setup is integrated properly:<a href="/docs/tools-and-resources/integrations/nextjs/manually-integrating-a-nextjs-project-to-zesty-content/">Manually integrating a Next.js project to Zesty content</a>​</p><h3>AutoLayout Component</h3><p>Here is an example of an AutoLayout component which manually maps through the custom components in the React project to the components built in the Zesty Layouts App</p><p><strong>QUICKSTART</strong></p><pre><code>Add this to the top of your fileimport { AutoLayout } from &quot;@zesty-io/react-autolayout&quot;;// Add this into your JSX body&lt;AutoLayout content={content} /&gt;s</code></pre><p>Here is a full example snippet of running AutoLayout and mapping them to your own custom components.</p><p>See more custom component example here<a href="https://nextjs-marketing-nine.vercel.app/layouts/"> https://nextjs-marketing-nine.vercel.app/layouts/</a>​</p><pre><code>import React from &quot;react&quot;;import { AutoLayout } from &quot;@zesty-io/react-autolayout&quot;;import { CustomTextarea } from &quot;./CustomTextarea&quot;;import { CustomColumn } from &quot;./CustomColumn&quot;;import { CustomRow } from &quot;./CustomRow&quot;;export default function Page({ content }) {&lt;AutoLayout content={content} components={{&quot;wysiwyg_basic&quot;: CustomTextarea,&quot;text&quot;: CustomText,&quot;column&quot;: CustomColumn,&quot;row&quot;: CustomRow,&quot;design&quot;: CustomDesign,&quot;link&quot;: CustomLink}} /&gt;}</code></pre>

This guide is a continuation from "Manually integrating a Next.js project to Zesty content"

<h2 dir="ltr">Get started with Zesty</h2>
<p dir="ltr">Try the platform for yourself or schedule 30 minutes with our team to see how Zesty is bridging the gap in headless content management.</p>

<h2 dir="ltr">Sony drives greater engagement with Zesty</h2>
<p dir="ltr">See how Sony got their website up and running 2x faster with Zesty&rsquo;s headless CMS.</p>
<p></p>

Zesty powers websites, apps, digital signage, and more for top brands. Reduce development time, increase flexibility, and customize workflows with the hybrid CMS built for modern digital experiences.

Build anything, without limits

Why Zesty?

<h2 dir="ltr">It&rsquo;s more than a headless CMS solution</h2>
<p dir="ltr">All the speed and flexibility of a headless CMS without the extra development and costs.</p>
<p dir="ltr"></p>
<ul>
<li class="hybridList">ICON_check <span> No need for additional platforms to create your end product </span></li>
<li class="hybridList">ICON_check <span> No additional costs for front-end development</span></li>
<li class="hybridList">ICON_check <span>No additional developer intervention to update pages</span></li>
</ul>

<h2>Zesty's key features</h2>
<p>Our platform accelerates content production with integrated features that simplify your work.</p>

<h2 dir="ltr">Headless is an overcorrection - we're here to fix that</h2>
<p dir="ltr">Pure headless CMS promises ultimate flexibility, but non-technical teams are left in the dark, development time increases and frustration becomes the norm. With Zesty, visual tools, flexible code, stage and publishing environments, and automation bridge the gap left by "cool" technologies.</p>
<p dir="ltr">Let's make building websites fun again.</p>

<h2 dir="ltr">The proof is in the numbers</h2>
<p dir="ltr">It&rsquo;s simple: Zesty.io is faster, easier, and more beneficial to your business than other CMS&rsquo;s.</p>
<p></p>

See what our customers have to say

<h2 dir="ltr">Get started with our enterprise headless solutions</h2>
<p dir="ltr">Request a 30-minute demo with our team to talk through your goals.</p>

See how our enterprise customers utilize Zesty

Enterprise headless CMS optimized for success

Zesty is a leading enterprise headless CMS trusted by top brands like Sony, Rocket League and the Phoenix Suns to take content creation and management to new heights.

Trusted by enterprise of any size

<h2 dir="ltr">What a headless CMS can do for enterprises</h2>
<p dir="ltr">Growing enterprises need to address complexity with the right technology.</p>

Why Zesty for your enterprise headless content management system?

<h2 dir="ltr">Utilize the full potential of headless digital asset management</h2>
<p dir="ltr">Zesty's native digital asset management system supercharges your content management with optimized digital file control. Simply drop your media into the DAM and access across all headless content modules.</p>

<p dir="ltr">With a headless DAM, your content can be optimized for any digital channel without the need for uploading multiple iterations of the same image, video, or other assets.</p>
<p dir="ltr">Store, organize and deploy files such as SVG, PNG, PDF, Webp, and more to your sites and applications, plus access all files across your organization all within the Zesty platform.</p>

<h2 dir="ltr">Show the world your content</h2>
<p dir="ltr">With a leading multi-language capabilities through our headless CMS, reaching your global audience has never been easier. Select your desired location, add your content and publish with an automated URL, optimized SEO and independent versions per language.</p>
<p></p>

Why Zesty’s multi-language headless CMS?

Why Zesty is the best mobile CMS choice

<h2>Content on Any Device</h2>
<h3>Delighting Customers on Any and Every Channel</h3>
<p>Omnichannel content management can be a nightmare - with multiple web softwares, iOS apps, web apps, Android Apps, Amazon Alexa, and other smart devices, managing content to all of these outlets is a challenge. Compliance requirements and internal processes only complicate it more. With Zesty.io's platform, control and distribute content wherever it needs to go and delegate control to local teams as needed - all from one, central, intuitive platform.</p>
<h2 style="text-align: center;"><strong>HOW OUR CLIENTS DO OMNICHANNEL</strong></h2>
<table>
<tbody>
<tr>
<td style="text-align: center;">
<p><img style="max-width: 100%;" title="rocket-league-zesty.io.png" src="https://kfg6bckb.media.zestyio.com/rocket-league-zesty.io.png" alt="" width="175" height="59" /></p>
<p>Rocket League Sends Content to Video Game with Zesty.io CaaS</p>
</td>
<td style="text-align: center;">
<p><img style="max-width: 100%;" title="acorns-logo-zestyio.png" src="https://kfg6bckb.media.zestyio.com/acorns-logo-zestyio.png" alt="" width="228" height="61" /></p>
<p>Large Financial Startup Manages Content Across Websites and Apps from One Repository</p>
</td>
</tr>
</tbody>
</table>
<p>Replatforming is quick and easy. But if you're not ready to replatform, good news! Zesty.io can work with your existing infrastructure to help you tame the omnichannel content management chaos. Some of the ways we help teams achieve easy omnichannel content management:</p>
<h3>SaaS That Grows With You</h3>
<p>Backed by the technology of SaaS, our headless content management platform empowers you to grow as much as you can, without outgrowing our platform. Integrate your experiences and distribute to as many endpoints as needed from one centralized platform, and never manage infrastructure again. Complex problem, easily solved.</p>
<h3>Device Agnostic</h3>
<p>Create and distribute content within Zesty.io and push it to any device, platform, or application, regardless of technology or language. Repurpose content from one channel to many channels without additional work or IT friction.&nbsp;</p>
<h3>Content Anywhere, Effectively</h3>
<p>Most headless CMSes generate a lot of waste. With Zesty.io, customize content feeds and even formats to ensure you're delivering content in the most effective way possible, no matter where it needs to go.&nbsp;</p>
<p><img style="max-width: 100%;" title="HeadlessVSZesty.png" src="https://kfg6bckb.media.zestyio.com/HeadlessVSZesty.png" alt="" /></p>
<h2 style="text-align: center;">Looking to Solve the Omnichannel Content Problem?&nbsp;</h2>

<p style="text-align: center;"><span id="hs-cta-wrapper-01ce2b63-8cce-4e87-9b48-f67112fef567" class="hs-cta-wrapper"><span id="hs-cta-01ce2b63-8cce-4e87-9b48-f67112fef567" class="hs-cta-node hs-cta-01ce2b63-8cce-4e87-9b48-f67112fef567"><a href="https://cta-redirect.hubspot.com/cta/redirect/4266960/01ce2b63-8cce-4e87-9b48-f67112fef567" target="_blank" rel="noopener"><img id="hs-cta-img-01ce2b63-8cce-4e87-9b48-f67112fef567" class="hs-cta-img" style="border-width: 0px;" src="https://no-cache.hubspot.com/cta/default/4266960/01ce2b63-8cce-4e87-9b48-f67112fef567.png" alt="Let's Chat!" /></a></span>
<script src="https://js.hscta.net/cta/current.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">// <![CDATA[
hbspt.cta.load(4266960, '01ce2b63-8cce-4e87-9b48-f67112fef567', {});
// ]]></script>
</span></p>

<h1>Unleash Your Content</h1>
<h2>Synchronize Content to Any Device with No IT Friction</h2>

Omni-channel Content Marketing

<h2 dir="ltr">Get your sites in line with Zesty</h2>
<p dir="ltr">Organize and optimize all your sites using our multi-site management feature. Contact our team today to schedule a 30-minute demo and talk through your goals.</p>

<h1 dir="ltr">Multi-site management with Zesty headless CMS</h1>
<p dir="ltr">Manage all of your websites, applications, event site and microsites in one intuitive dashboard. Our headless CMS multi-site feature gives brands the power to grow without limits.</p>

How to get started with multi-site management in Zesty

Why choose one platform for multiple sites?

<h2>Start building with Zesty's headless commerce CMS</h2>

A customer-focused solution for providing world-class online shopping experiences.

<h2 dir="ltr">The power of headless commerce</h2>
<p dir="ltr">With consumers shopping across a wide range of channels, it's more important than ever to create seamless ecommerce experiences. Headless commerce separates the front-end visual content from the backend commerce functions to allow for more flexibility, greater customization and speedier experiences across commerce channels.</p>

<h3>Headless Commerce</h3>
<p>Flexible user experience</p>
<p>Decoupled frontend/backend</p>
<p>Deliver content across any device</p>
<p>Limitless commerce experiences</p>

<h3>Traditional Commerce</h3>
<p>Fixed user experience</p>
<p>Coupled frontend/backend</p>
<p>Limited content creation</p>
<p>Limited commerce experiences</p>

<h2 dir="ltr">Traditional vs headless commerce</h2>
<p dir="ltr">The main difference between headless and traditional commerce is the ability to seamlessly place content across multiple channels. In a traditional commerce setup, updating new items across web, mobile and other devices requires more development time and resources.</p>

<h2 dir="ltr">Why choose Zesty as your headless commerce solution?</h2>
<p dir="ltr">Zesty provides headless commerce without the headache so you can spend less time developing and more time selling.</p>

Product Overview

Build with Zesty

Key Features

Product

7-f49680e5fe-f0p097

7-f8c88fc1c3-b64fth

7-d6888d9aa9-v7w4zn

The influencer marketing site highlighting teams isn't just celebrated among the community, but also a win for Psyonix technology and marketing teams.

Rocket League Leverages Zesty.io for E-Sports Site Celebrating Players and Tournaments

After Uber acquired Cornershop, the plan to fuel worldwide expansion required a solution that offers multi-language support, SEO, and scalability.

Cornershop by Uber Selects Zesty.io to Drive Global Expansion Effort

<h2>Zesty powers agile finance</h2>

<h2>See what customers like you have accomplished with Zesty</h2>

Trusted by top companies

<h1 dir="ltr">Financial content management made easy</h1>
<p dir="ltr">Connect with your customers securely across the world and on any device by leveraging Zesty for your finance, banking, or fintech company.</p>
<p></p>

<h2 dir="ltr">Results to keep your business moving forward</h2>
<p dir="ltr">Our Fintech and insurance customers have been able to accomplish more since switching to Zesty. On average, Zesty helps companies achieve:</p>

See how Zesty works for your whole team

Our customers love working with Zesty

<h2>Better gaming experiences start here</h2>

<h2>See what our customers have achieved with Zesty</h2>

Top companies trust Zesty

<h1 dir="ltr">Create more immersive content</h1>
<p dir="ltr">Make players into superfans by leveraging our powerful multi-channel, auto-optimized CMS for gaming, community and more.</p>

<h2 dir="ltr">Winning results for digital content</h2>
<p dir="ltr">Our gaming customers create more content with Zesty. On average, Zesty helps them achieve:</p>
<p></p>

Our users love Zesty

<h2>Turn the page to better content management</h2>

<h1 dir="ltr">Powerful content management, period.</h1>
<p dir="ltr">Get your readers hooked on your digital content by leveraging our powerful multi-channel, auto-optimized content management system.</p>

<h2>Integrate with your favorite technologies seamlessly.</h2>
<p>Choose your favorite frameworks, marketing automation tools, and analytics platforms to integrate with Zesty.</p>

<h2 dir="ltr">Results you can write home about</h2>
<p dir="ltr">Our publishing customers write and publish more content with Zesty. On average, Zesty helps them achieve:</p>

<h2>Manage more with less headache</h2>
<p>Whether you're looking to find more franchises, ignite growth within your current franchises, or expand your offerings, Zesty can help your business succeed with website and app management.</p>

<h2>See how Zesty's clients manage multiple brands and scale faster</h2>

<h1>Accelerate franchise growth with scalable website management</h1>
<p>Zesty.io provides franchises with the only tool to manage content at scale without extra development time or resources.</p>
<p>Say goodbye to plugins, workarounds, and headaches.</p>

<h2>Integrate with any technology</h2>
<p>Choose your favorite frameworks, marketing automation tools, and analytics platforms to integrate with Zesty.</p>

<h2>The proof is in the numbers</h2>
<p>Zesty helps brands achieve:</p>

Our clients love working with Zesty

<h2>Documentation &amp; resources for success</h2>

<h2 dir="ltr">Ready to see the Zesty difference?</h2>
<p dir="ltr">Start a new instance for free or schedule a demo with our team to talk through your goals.</p>

<h1 dir="ltr">Headless content management powering greater developer freedom</h1>
<p dir="ltr">From simple marketing websites to complex influencer portals to in-app content delivery, Zesty provides developers with an end-to-end API to power any project.</p>

<h2 dir="ltr">Pre-built integrations for any project</h2>
<p dir="ltr">Zesty can integrate with any framework or technology you prefer. See our list of integrations on our marketplace, or request an integration from our team.&nbsp;</p>

<h2 dir="ltr">The most robust content API</h2>
<p dir="ltr">We're developers creating products for developers. Since we live and breathe content, we've built our content API to be extremely flexible and adaptive.</p>

<h2 dir="ltr">Seamlessly integrate Zesty into your business</h2>
<p dir="ltr">Every API endpoint is available so you can build custom applications alongside or on top of Zesty.&nbsp;</p>
<p dir="ltr">See the future of digital unfold in front of you: Content automation robots, automatic translation, social integrations, influencer content, easier data migrations, and more.</p>

Zesty drives advanced content management

<h2 dir="ltr">We've got your back</h2>
<p dir="ltr">Developing is in our DNA and Zesty's technical experts are here if you need support for your project. When you work with Zesty, you unlock access to:</p>
<ul>
<li dir="ltr" style="list-style-type: disc;" aria-level="1"><span>On-demand videos and tutorials for your project</span></li>
<li dir="ltr" style="list-style-type: disc;" aria-level="1"><span dir="ltr" role="presentation">Personalized chat to help you be successful</span></li>
<li dir="ltr" style="list-style-type: disc;" aria-level="1"><span dir="ltr" role="presentation">Continual information sharing on how to integrate, build and optimize</span></li>
<li dir="ltr" style="list-style-type: disc;" aria-level="1"><span dir="ltr" role="presentation">Support to ensure success launch of your project</span></li>
</ul>

Our customers love Zesty See what our customers have to say

<h1>Our customers love Zesty</h1>
<p>See what they have to say</p>

<p>API-first approach to content, launched on a scalable cloud</p>

<h2 dir="ltr" style="text-align: center;">Headless doesn't have to be a headache</h2>
<p dir="ltr" style="text-align: center;">The agility that developers love can be embraced by marketers too.</p>

<h2>High-growth companies like yours choose Zesty</h2>
<p>See how they built success on our platform.</p>

Trusted by top global brands

<h1 dir="ltr">Take the frustration out of content management</h1>
<p dir="ltr">Hours spent to develop one page? Declining SEO rank? Limited flexibility?</p>
<p dir="ltr">You can forget all that.</p>
<p dir="ltr">We understand that marketing budgets are tight, customers have short attention spans, and you only have so much time in your day to pull your hair out over frustrating products.</p>
<p dir="ltr">Let's do headless CMS differently.</p>
<p></p>

<h2 dir="ltr">Leverage your favorite marketing tools with Zesty</h2>
<p dir="ltr">Zesty can integrate with any of your preferred platforms such as CRM, CDP, marketing automation, analytics, personalization, A/B testing, and more.</p>

<h2 dir="ltr">Realize real results, fast</h2>
<p dir="ltr">Our customers have been able to stand up sites faster, handle spikes in traffic better and lower their total cost of ownership since switching to Zesty. On average, Zesty helps companies achieve:</p>

<h2>Zesty powers agile businesses</h2>

<h1 dir="ltr">Future-proof your digital channels</h1>
<p dir="ltr">Effective content management is vital for growing businesses. It is the backbone of any digital strategy and a key way to connect with your customers.&nbsp;</p>
<p dir="ltr">But outdated platforms, imperfect new solutions, and frustrating processes make modern digital creation difficult, resulting in subpar websites or apps that lose visitors.</p>
<p dir="ltr">Let's do things differently.</p>

<h2>Seamlessly integrate with your existing tech stack</h2>
<p>Zesty.io works with your favorite frameworks, marketing automation tools, CRM and more, to power more agile business.</p>

<h2 dir="ltr">Real results, real fast</h2>
<p dir="ltr">Our customers have been able to stand up sites faster, handle spikes in traffic better and lower their total cost of ownership since switching to Zesty. On average, Zesty helps companies achieve:</p>

By Industry

Customer Stories

By Role

See all customer stories

Use Cases

The latest product updates from the Zesty.io team.

<h2>Build scalable progressive web applications, desktop apps, eCommerce, and more with a flexible Next.js CMS</h2>
<p>Next.js and Zesty.io build easily with React, making it simple to work between the two systems. With Zesty's flexible framework, you can choose the tech stack integrations that work best for your team, including launching with Zesty, Vercel, AWS, Google Cloud, and more. Plus, leverage Zesty WebEngine to reduce coding and increase marketer control.</p>

<h2>Deploy your Next.js application as fast as NPM can load</h2>
<p>For every page and its related data, content is automatically resolved without the need for additional code. And for every model you make in Zesty, there is a corresponding component available in Next.js. Plus, you can leverage GIT workflows and auto-deploy using Github actions. Your development process has never looked better.</p>

<h2 dir="ltr">Server-rendered and SEO friendly websites start with just a few lines of code</h2>
<p dir="ltr">Give your marketing team more flexibility without compromising best-in-class development. Kickstart your project with a simple NPM code, then give your marketers the freedom to develop content with stage previews, development environments, production updates, and SEO control. They can do all this from within Zesty and without additional development time. Win, win.</p>

Click that line of code to launch your free project.

Ready to start with your Next.js headless CMS?

Zesty.io is the flexible-API headless CMS to integrate with Next.js javascript. Start your project for free.

<h2 dir="ltr">Next.js equipped with scalable content management</h2>
<p dir="ltr">Next.js is a modern React javascript framework that can be used to power server-side rendered applications, static websites, and more. Its simplicity has made it a top choice for modern developers.</p>
<p dir="ltr">Zesty.io was built for server-side rendering, making development with Next.js a dream. With our Next.JS CMS at your fingertips, you can author and manage client-focused content experiences across multiple channels, digital products, and devices with minimal effort.</p>

Learn more about Zesty

Top companies choose Zesty.io

Next.js resources to kickstart your next project

Access resources

<h1>Top companies choose Zesty</h1>
<p>See what they have to say about our platform.</p>

Next.js CMS integration is simple with Zesty. Watch the video below for a quick overview of how to get started.

<h2>Scale your progressive web applications and more with&nbsp; a more powerful React CMS</h2>
<p>Zesty.io builds easily with React and Next.js and integrates with your favorite tech stack. With Zesty, you can launch with Vercel, AWS, Google Cloud, and more. Or leverage Zesty WebEngine to reduce coding.</p>

<h2>Deploy your React application instantly</h2>
<p>For every page and its related data, content is automatically resolved without the need for additional code.</p>
<p>There is also a corresponding React component for every model you make in Zesty. You can also leverage GIT workflows and auto-deploy using Github actions.</p>

<h2 dir="ltr">Build server-rendered and SEO-friendly websites easily</h2>
<p dir="ltr">Give your marketing teams the power of fast, SEO-rich websites while leveraging best-in-class development. Start your project with an NPM code, then give your marketers the freedom to develop content with stage previews, development environments, production updates, and SEO control.</p>

React is a Javascript library that powers modern websites and applications. With Zesty's headless CMS, you can create content visually with React.

React and Next.js resources for your next project

<h1>See what developers say about our platform</h1>

Integrations

Product Insights

Product Roadmap

Understand the pros and cons of the top 10 javascript frameworks, plus their best use cases

A Developer's Guide to the JavaScript Framework Landscape 2023

Learn how to leverage unique URL parameters to A/B test landing pages

How to A/B test on your website with a headless CMS

We had to come out and say it. Pure headless isn't the right fit for most companies.

Pure headless CMS is an overcorrection. Here’s why.

Pure headless CMS is an overcorrection

How we rebuilt our website with the Material UI design system

How we rebuilt our site with the Material UI design system

Learn more about how to leverage headless CMS or composable DXP for your business.

Latest articles

 See how our clients have leveraged Zesty.io for success.

 Case Studies

Get the latest from the Zesty team, from whitepapers to product updates.

Subscribe to the zestiest newsletter in the industry

The latest news and trends at the intersection of marketing and IT. We create content about omnichannel marketing, marketing technology, and other innovations in the space.

The latest trends at the intersection of marketing and IT.

Zesty Blog

Dive deeper into the headless CMS and DXP markets.

Top insights

See the latest updates from the Zesty team.

Learn how customers use Zesty.io to accomplish their goals and grow their brands.

Join our newsletter to stay up-to-date on the latest from Zesty.io

Products

How to`s

Manager UI

SEO

Connecting Layouts App to React

Install Autolayout package

Ensure Zesty is integrated to your React app

AutoLayout Component

Start Here

Connect with Content Experts