{"id":27725452,"url":"https://github.com/zesty-io/live-editor","last_synced_at":"2025-04-27T19:18:21.297Z","repository":{"id":37395538,"uuid":"479076005","full_name":"zesty-io/live-editor","owner":"zesty-io","description":"Website/App Overlay Guide for Editing Zesty.io Content ","archived":false,"fork":false,"pushed_at":"2023-08-01T13:05:33.000Z","size":20710,"stargazers_count":2,"open_issues_count":5,"forks_count":1,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-04-27T19:18:01.243Z","etag":null,"topics":["zesty-io"],"latest_commit_sha":null,"homepage":"https://chrome.google.com/webstore/detail/zestyio-webengine-view-ex/mnkmogppmhhmafgfljgckpkapodofjob","language":"TypeScript","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":"CONTRIBUTING.md","funding":null,"license":null,"code_of_conduct":"CODE_OF_CONDUCT.md","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}},"created_at":"2022-04-07T17:02:42.000Z","updated_at":"2023-10-02T07:41:44.000Z","dependencies_parsed_at":"2024-06-21T15:35:03.375Z","dependency_job_id":"8650d7ec-70fa-412c-9841-5d2ffaa45b06","html_url":"https://github.com/zesty-io/live-editor","commit_stats":{"total_commits":334,"total_committers":6,"mean_commits":"55.666666666666664","dds":"0.16766467065868262","last_synced_commit":"66b8cd0441f04e62d3ec0d355ff2ed41f5418f05"},"previous_names":[],"tags_count":47,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zesty-io%2Flive-editor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zesty-io%2Flive-editor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zesty-io%2Flive-editor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zesty-io%2Flive-editor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zesty-io","download_url":"https://codeload.github.com/zesty-io/live-editor/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251191563,"owners_count":21550142,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["zesty-io"],"created_at":"2025-04-27T19:18:20.683Z","updated_at":"2025-04-27T19:18:21.291Z","avatar_url":"https://github.com/zesty-io.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n\n\u003cimg src=\"https://brand.zesty.io/zesty-io-logo.svg\" alt=\"zesty logo\" width=\"200\"\u003e\n\u003cp\u003e\n\n\u003ch1 align=\"center\"\u003e Zesty.io Live Editor \u003c/h1\u003e\n\u003cp align=\"center\"\u003e\nWebsite/App Overlay Guide for Editing Zesty.io Content\n\n\u003cp\u003e\n\u003cdiv align=\"center\"\u003e\n\n![npm](https://img.shields.io/npm/dt/@zesty-io/live-editor?label=NPM%20Downloads\u0026style=flat-square)\n![GitHub package.json version](https://img.shields.io/github/package-json/v/zesty-io/live-editor?style=flat-square)\n![GitHub issues](https://img.shields.io/github/issues/zesty-io/live-editor?style=flat-square)\n![Chrome Web Store](https://img.shields.io/chrome-web-store/rating/mnkmogppmhhmafgfljgckpkapodofjob?label=Chrome%20Web%20Store%20Rating\u0026style=flat-square)\n![GitHub package.json dependency version (prod)](https://img.shields.io/github/package-json/dependency-version/zesty-io/live-editor/react?style=flat-square)\n![TypeScript](https://img.shields.io/badge/typescript-%23007ACC.svg?style=flat-square\u0026logo=typescript\u0026logoColor=white)\n![MUI](https://img.shields.io/badge/MUI-%230081CB.svg?style=flat-square\u0026logo=mui\u0026logoColor=white)\n![Webpack](https://img.shields.io/badge/webpack-%238DD6F9.svg?style=flat-square\u0026logo=webpack\u0026logoColor=black)\n![NPM](https://img.shields.io/npm/l/@zesty-io/live-editor?style=flat-square)\n\n\u003c/div\u003e\n\n# ⚡ Installing\n\nRequires `node version ^16.x.x`\n\nUsing NPM\n\n```jsx\nnpm install @zesty-io/live-editor\n```\n\nUsing Yarn\n\n```jsx\nyarn add  @zesty-io/live-editor\n```\n\nUsing jsDelivr CDN\n\n```jsx\n\u003cscript\n   type=\"text/javascript\"\n   src=\"https://cdn.jsdelivr.net/gh/zesty-io/live-editor@latest/dist/live-editor.production.js\"\n   defer=\"defer\"\n\u003e\u003c/script\u003e\n```\n\nNote, if your website has a strict content security policy or x-frame-options, you will need to add this url to your white list\n\n```\nhttps://cdn.jsdelivr.net/gh/zesty-io/live-editor@latest/dist/live-editor.production.js\n```\n\n# ✨ Quickstart\n\nUsing React, place this code in your app.js or app loading file\n\n```jsx\nimport { ZestyLiveEditor } from \"@zesty-io/live-editor\"\n\nReact.useEffect(() =\u003e {\n   ZestyLiveEditor(data)\n}, [])\n```\n\nUsing Nextjs, place this in `ZestyView.js`, or for custom builds, `_document.js` or `_app.js`\n\n```jsx\n// outside the component near imports\nconst initLiveEditor = async (data) =\u003e {\n   const { ZestyLiveEditor } = await import(\"@zesty-io/live-editor\")\n   ZestyLiveEditor(data)\n}\n\n// inside the component's function just before the return statement\nReact.useEffect(() =\u003e {\n   initLiveEditor(props.content)\n}, [])\n```\n\nUsing Vuejs\n\n```html\n\u003cscript\u003e\n\n   import { ZestyLiveEditor } from \"@zesty-io/live-editor\"\n\n    methods:{\n        initLiveEditor: function(data) {\n            ZestyLiveEditor(data)\n        }\n    },\n    beforeMount(){\n       this.initLiveEditor(data)\n    },\n\u003c/script\u003e\n```\n\n## 💡 Overview\n\nIs that the explorer will be a website overlay tool that will guide the user around the data that loads on the page relative to the zesty content management system. The tool will have tabs for searchable on page data, full site navigation, inline editing, website and page health, metadata explorer, image optimization scanning, broken link scanning.\n\n## 💡How to Implement\n\nThe tool should be built in compiled JavaScript and execute in plain JavaScript so it can run over any installation of zesty, whether it's parsley templating, next js, nuxt, or any custom build.\n\n## Distribution\n\nIt should be distributed over npm package manager and yarn, it should also be able to be manually installed from a CDN link.\n\n## Publishing to NPM\n\n-  Manually: `npm run manual-publish`\n-  Github flow: any merge to main will run a release and publish flow\n\n# Zesty Page Composer Application Overview\n\nZesty is an application that can make any website or text base document on the internet editable. It runs as javascript application and is powered by a Zesty's multi-tenant cloud based API. It would by piping any directing any live domain with a website through WebEngine. Webengine serves the application through and inject content with Parsley, a templating language that connects to the the Zesty API.\n\n##💡 Design\n\nFigma file https://www.figma.com/file/TsOMa4gbWHgMzWyXH8MXpt/Explorer?node-id=0%3A1\n\n## How the experience works\n\nA domain is pointed to Zesty Webengine, and the Zesty Overlay Editor is injected into the page when it renders. The overlay tool lets the user select portions of the page they need to edit, and also gives the user the option to add sections into the page. This is made possible by storing a document which HTML markup and Parlsey is written to. When the document is served, WebEngine will render it by processing and compiling Parsley into a final web document, injecting SEO and webpage needed functionality.\n\n### 💡 Tools in the WebSite Overlay tool\n\n## 💡 Content\n\nA tablar view of the content editable on the page, when an item is selected, it scrolls you the approate area, highlights it on page, and allows the user to change and save the page. When the content view is selected, a user may select an area on page where they would like to edit contnet, or add a new block to the page (like a image and text block).\n\n### How blocks work\n\nBlocks are premade design expeirences. They have premade connections to load content. Blocks will be served from a Parsley HTML repo or served into headless app from a React based npm package managed by Zesty (open-source). A user can preview blocks from a block browser, and select which on they want to inject in page.\n\n### Working in headless\n\nHeadless applications only need the markup name `\u003cZesty/\u003e` to render on their finished page, and have their application hosted somewhere remote with a URL that can be plugged into Zesty WebEngine, there are two envirnoment for this, Production and Stage. Pages or URLs get registered in Zesty, and the URL is how the page is resolved, which injects into the page where the `\u003cZesty/\u003e` tag is. `\u003cZesty\u003e` can load remotely through a React component, or if the app is loaded through WebEngine only the string `\u003cZesty/\u003e` needs to be present.\n\n### Working without Headless\n\nThe parlsey tag `{{current_view}}` and `\u003cZesty/\u003e` function the same. The difference is when Zesty runs the `loader` file in zesty runs and controls the page build, which is automated through WebEngine.\n\n**loader file explantation**\n\n```jsx\n\u003chtml\u003e (automated from webengine)\n  \u003chead\u003e\u003c/head\u003e (automated from webengine)\n  \u003cbody\u003e (loader wraps the body)\n  {{current_view}} (injects the view rendered relative to the URL)\n  \u003c/body\u003e\n\u003c/html\u003e (automated from webengine)\n```\n\n### Writing Changes\n\nZesty Overlay using the Rest API (instances-api) to write both content and files.\n\n### SEO / Meta / Headtags\n\nA view of the pages SEO and meta values which can be edited, this is not limited to SEO meta tags, but open graph tags, scripts, and other head tags. Head tags are injected into the page though WebEngine, prior to Search Engines reading it.\n\n## 💡 How to run locally\n\nCheck \u003ca href=\"https://github.com/zesty-io/live-editor/blob/development/CONTRIBUTING.md#quickstart-local-frontend-development\"\u003ehere\u003c/a\u003e on how to run locally\u003c/a\u003e\n\n## 💡 How to Commit\n\nCheck \u003ca href=\"https://github.com/zesty-io/live-editor/blob/development/CONTRIBUTING.md#Using-the-Project's-Standard-Commit Messages\"\u003ehere\u003c/a\u003e\n\n## 💡 Deploying in Production\n\n### Automated\n\n-  All successfull merge to main will create a release and publish to npm\n\n### Manually\n\n```jsx\ngit checkout main \u0026\u0026 npm run release\n```\n\n## Testing Locally in the browser\n\n-  run `npm run dev` to start the application locally\n-  Open /test/index.html in your browser\n-  Remove index.html from the browser file path\n-  use this override domain `https://qzp3zx5t-dev.webEngine.zesty.io/`\n\n## 🖥️ Code Contributors\n\n  \u003cimg src =\"https://contrib.rocks/image?repo=zesty-io/live-editor\"/\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzesty-io%2Flive-editor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzesty-io%2Flive-editor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzesty-io%2Flive-editor/lists"}