{"id":26696384,"url":"https://github.com/dashpilot/alpinejs-page-editor","last_synced_at":"2025-09-04T01:40:35.610Z","repository":{"id":279792645,"uuid":"939987446","full_name":"dashpilot/alpinejs-page-editor","owner":"dashpilot","description":"Alpinejs Page Editor is an easy-to-use on-page editor for any Alpine.js project. It automatically generates the inputs depending on your data structure.","archived":false,"fork":false,"pushed_at":"2025-03-25T00:02:23.000Z","size":421,"stargazers_count":38,"open_issues_count":0,"forks_count":4,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-04-13T03:24:37.582Z","etag":null,"topics":["alpinejs","cms","editor","pagebuilder","wysiwyg","wysiwyg-editor"],"latest_commit_sha":null,"homepage":"https://alpinejs-page-editor.vercel.app","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/dashpilot.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":"2025-02-27T12:39:34.000Z","updated_at":"2025-03-25T22:42:13.000Z","dependencies_parsed_at":null,"dependency_job_id":"14b9d69a-a033-4837-ac5c-61ba043ac70f","html_url":"https://github.com/dashpilot/alpinejs-page-editor","commit_stats":null,"previous_names":["dashpilot/alpinejs-page-editor"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/dashpilot/alpinejs-page-editor","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dashpilot%2Falpinejs-page-editor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dashpilot%2Falpinejs-page-editor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dashpilot%2Falpinejs-page-editor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dashpilot%2Falpinejs-page-editor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dashpilot","download_url":"https://codeload.github.com/dashpilot/alpinejs-page-editor/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dashpilot%2Falpinejs-page-editor/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":273539293,"owners_count":25123499,"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","status":"online","status_checked_at":"2025-09-03T02:00:09.631Z","response_time":76,"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":["alpinejs","cms","editor","pagebuilder","wysiwyg","wysiwyg-editor"],"created_at":"2025-03-26T20:20:06.847Z","updated_at":"2025-09-04T01:40:35.577Z","avatar_url":"https://github.com/dashpilot.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Alpine.js Page Editor\n\nAlpinejs Page Editor is an easy-to-use on-page editor for any Alpine.js project. It will automatically generate the editor forms based on the structure of your data! Furthermore it features:\n\n-   editing of single-line and multiline text\n-   in-browser image upload and resize\n-   support for adding, deleting and reordering items\n\n\u003e Heads up: If you like Alpine.js, you should definitely check out my Alpine.js Server-side-rendering (SSR) project: https://github.com/dashpilot/alpinejs-ssr\n\n# Preview\n\n\u003cimg src=\"img/preview.png\" style=\"width: 100%\" /\u003e\n\n# New: enable/disable sections\n\n\u003cimg src=\"img/settings-editor.png\" style=\"width: 50%\" /\u003e\n\n# New: you can override the default settings by defining a global cfg object\n\n-   cfg.data (will override the data fetching)\n-   cfg.fieldTypes (will be automatically merged with existing settings)\n-   cfg.enableSettings\n-   cfg.dataUrl (alternative data source)\n\n# Demo\n\nhttps://alpinejs-page-editor.vercel.app\n\n# How to use\n\nFirst, include the necessary scripts and CSS at the bottom of your page:\n\n```html\n\u003c!-- Page Editor CSS --\u003e\n\u003clink rel=\"stylesheet\" href=\"js/alpinejs-page-editor.css\" /\u003e\n\u003c!-- Pica for image resizing --\u003e\n\u003cscript src=\"https://cdnjs.cloudflare.com/ajax/libs/pica/9.0.1/pica.min.js\" integrity=\"sha512-FH8Ofw1HLbwK/UTvlNBxsfICDXYZBr9dPuTh3j17E5n1QZjaucKikW6UwMREFo7Z42AlIigHha3UVwWepr0Ujw==\" crossorigin=\"anonymous\" referrerpolicy=\"no-referrer\"\u003e\u003c/script\u003e\n\u003c!-- Page Editor js --\u003e\n\u003cscript src=\"js/alpinejs-page-editor.js\"\u003e\u003c/script\u003e\n```\n\nThen, wrap your page in:\n\n```html\n\u003cdiv x-data=\"app\" id=\"app\"\u003e\u003c/div\u003e\n```\n\nMake an element editable by adding the attribute: `x-editable`. Make sure the element's value corresponds to the corresponding key in data.json.\n\nSo to edit the hero section:\n\n```json\n{\n    \"hero\": {\n        \"title\": \"Welcome to Alpine.js Page Editor\",\n        \"subtitle\": \"A simple, reactive content editor that works with any HTML structure\"\n    }\n}\n```\n\nand in your html:\n\n```html\n\u003c!-- The value of x-editable should correspond to the key in your data, 'hero' in this case --\u003e\n\u003cdiv x-editable=\"hero\"\u003e\u003c/div\u003e\n```\n\nTake a look at the demo to see how it works.\n\n## Data structure\n\nIn order for the editor to automatically generate the necessary inputs, your data needs to adhere to a few conventions:\n\nEach section in your site corresponds to a top-level object key in data.json. The value of this key should be and object.\n\nIf you name a key of that object `intro`, `body`, `details` or `description` it becomes a multiline input (textarea). If you name it `image` ite becomes an image uploader. All other keys become single-line inputs.\n\n```json\n{\n    \"hero\": {\n        \"title\": \"Welcome to Alpine.js Page Editor\",\n        \"description\": \"A simple, reactive content editor that works with any HTML structure\",\n        \"image\": \"img/placeholder.jpg\"\n    }\n}\n```\n\n## Groups\n\nBut there's more: you can also add groups/arrays of items, which adhere to the same naming-convertions as above, but can be added/deleted and reordered! To add a sub-group of items, add a key called `items` which should be an array of objects. For example:\n\n```json\n{\n    \"services\": {\n        \"title\": \"Our Services\",\n        \"description\": \"We offer a wide range of services to meet your needs\",\n        \"items\": [\n            {\n                \"title\": \"Web Development\",\n                \"description\": \"Custom websites built with the latest technologies.\",\n                \"image\": \"img/placeholder.jpg\"\n            },\n            {\n                \"title\": \"App Development\",\n                \"description\": \"Mobile applications for iOS and Android platforms.\",\n                \"image\": \"img/placeholder.jpg\"\n            }\n        ]\n    }\n}\n```\n\n## Configuration\n\nOptionally, you can provide a global `cfg` object to configure the editor:\n\n```js\ncfg = {\n    enableSettings: true, // decides if the 'settings' button is visible\n    page: 'home', // this param is posted to /api/save when the user presses the 'save button'\n    template: 'default', // this param is posted to /api/save when the user presses the 'save button'\n};\n```\n\n## Run the demo locally\n\nTo run the project locally, run:\n\n```bash\nnpx serve\n```\n\nThis will start a local server on localhost:3000\n\n# Changelog\n\n-   2025-02-28: added settings panel where you can enable/disable sections\n-   2025-02-27: initial release\n\n## Press the :star: button\n\nDon't forget to press the :star: button to let me know I should continue improving this project.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdashpilot%2Falpinejs-page-editor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdashpilot%2Falpinejs-page-editor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdashpilot%2Falpinejs-page-editor/lists"}