{"id":28273059,"url":"https://github.com/zesty-io/react-autolayout","last_synced_at":"2026-07-13T23:32:23.925Z","repository":{"id":209557360,"uuid":"387237196","full_name":"zesty-io/react-autolayout","owner":"zesty-io","description":"React components to consume autolayout data","archived":false,"fork":false,"pushed_at":"2023-11-30T08:15:15.000Z","size":720,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-10-27T23:01:04.316Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zesty-io.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2021-07-18T17:53:48.000Z","updated_at":"2023-11-28T00:07:03.000Z","dependencies_parsed_at":"2023-11-28T02:27:23.463Z","dependency_job_id":"fb95a746-d444-4ebd-9aab-d37508090e4e","html_url":"https://github.com/zesty-io/react-autolayout","commit_stats":null,"previous_names":["zesty-io/react-autolayout"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/zesty-io/react-autolayout","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zesty-io%2Freact-autolayout","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zesty-io%2Freact-autolayout/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zesty-io%2Freact-autolayout/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zesty-io%2Freact-autolayout/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zesty-io","download_url":"https://codeload.github.com/zesty-io/react-autolayout/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zesty-io%2Freact-autolayout/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":35440511,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-07-13T02:00:06.543Z","response_time":119,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-05-21T00:17:13.431Z","updated_at":"2026-07-13T23:32:23.908Z","avatar_url":"https://github.com/zesty-io.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Zesty.io Auto Page Layout in React\n\n\u003e React components to consume the marketers controlled Zesty.io Drag n Drop Content Deisgner JSON which rendered automatics layouts.\n\nThe AutoLayout feature allows for content authors to use the Drag n Drop ContentDesigner tool to craft a layout structure which is made available with JSON endpoints which are consumed by this library. Once Content Designer JSON enpoints are consumed, all published changes to content or layout in the ManagerUI will automatically be reflected on the front-end.\n\n# Getting Started\n\nIn your React NextJS app, install autolayout with an npm call\n\n```npm i @zesty-io/react-autolayout```\n\nThere are two implmentation of auto layout, (1) works with Next.js (2) works independently. \n\n## 1. Next.js implementation\n\nThe expects the `{content}` object fed from the nextjs zesty integration to be passed to the AutoLayout object.\n\n```javascript\nimport React from 'react'\nimport { AutoLayout } from \"@zesty-io/react-autolayout\";\n\nexport default function Page({ content }) {\n  return (\n    \u003cdiv className=\"container\"\u003e\n      \u003cAutoLayout content={content} /\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n## Independent Implementation\n\nIn the component you want to run auto layout, using the URL\n\n```javascript\nimport { AutoLayout } from \"@zesty-io/react-autolayout\";\n\nexport default function Page({ page }) {\n  let zestyToJSONReference= `https://4q6k83l9-dev.webengine.zesty.io/zop-gun/?toJSON`\n  return (\n    \u003cdiv className=\"container\"\u003e\n      \u003cAutoLayout url={zestyToJSONReference} /\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n## Using  custom components \n\nCustom components can be written to override the defaults pages components for content types like Textarea, Column, Text etc.. An example of that code is:\n\n```javascript\nimport React from \"react\";\n\nimport { AutoLayout } from \"@zesty-io/react-autolayout\";\nimport { CustomTextarea } from \"./CustomTextarea\";\nimport { CustomColumn } from \"./CustomColumn\";\n\nexport default function Page({ page }) {\n  let zestyJSONReference = `https://4q6k83l9-dev.webengine.zesty.io/zop-gun/?toJSON`\n  return (\n    \u003cdiv className=\"container\"\u003e\n      \u003cAutoLayout url={zestyJSONReference} components={{\n      \"textarea\": CustomTextarea,\n      \"column\": CustomColumn\n    }} /\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\nThe `CustomTextarea` custome component is written like: \n\n```javascript\nimport React from 'react';\nexport function CustomTextarea(props) {\n    return \u003cdiv  style={{\n        margin: \"16px\"\n    }}\u003e\n        \u003ch1\u003eCustom  Textarea Component\u003c/h1\u003e\n        \u003cp style={{\n            fontWeight: \"bold\",\n            fontSize: \"24px\",\n            color: \"red\"\n        }} dangerouslySetInnerHTML={{ __html: props.data.html }} /\u003e\n    \u003c/div\u003e;\n}\n```\n\nExplore NextJS example reference: https://github.com/zesty-io/demos/blob/main/nextjs/pages/autolayout\n\n\n## Example Demo\n\n![image](https://github.com/zesty-io/react-autolayout/assets/44116036/90a0bb96-7902-49e0-a269-a16598f6ee23)\n![image](https://github.com/zesty-io/react-autolayout/assets/44116036/3bf775c8-f059-44cf-b935-8a3ba5b0ec47)\n\n[screencast-8-c8e4be8cbc-10sbs4.manager.zesty.io-2023.11.30-16_06_22.webm](https://github.com/zesty-io/react-autolayout/assets/44116036/2cebe22a-e71d-4326-bcea-a3d0d03bd1ad)\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzesty-io%2Freact-autolayout","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzesty-io%2Freact-autolayout","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzesty-io%2Freact-autolayout/lists"}