{"id":22109763,"url":"https://github.com/iamspark1e/decap-cms-widget-starter","last_synced_at":"2025-07-25T06:31:32.218Z","repository":{"id":189400388,"uuid":"680617494","full_name":"iamspark1e/decap-cms-widget-starter","owner":"iamspark1e","description":"A starter template for custom Decap CMS widget development, with Vite","archived":false,"fork":false,"pushed_at":"2023-08-24T03:33:42.000Z","size":358,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-11-13T14:53:32.325Z","etag":null,"topics":["decap-cms","decap-cms-widget","netlify-cms","netlify-cms-widgets","starter-kit","starter-template"],"latest_commit_sha":null,"homepage":"","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/iamspark1e.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}},"created_at":"2023-08-19T20:30:09.000Z","updated_at":"2024-11-11T00:22:47.000Z","dependencies_parsed_at":"2023-08-19T21:02:05.502Z","dependency_job_id":null,"html_url":"https://github.com/iamspark1e/decap-cms-widget-starter","commit_stats":null,"previous_names":["iamspark1e/decap-cms-widget-starter"],"tags_count":0,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iamspark1e%2Fdecap-cms-widget-starter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iamspark1e%2Fdecap-cms-widget-starter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iamspark1e%2Fdecap-cms-widget-starter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iamspark1e%2Fdecap-cms-widget-starter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/iamspark1e","download_url":"https://codeload.github.com/iamspark1e/decap-cms-widget-starter/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":227531904,"owners_count":17784290,"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":["decap-cms","decap-cms-widget","netlify-cms","netlify-cms-widgets","starter-kit","starter-template"],"created_at":"2024-12-01T09:39:05.007Z","updated_at":"2024-12-01T09:39:05.522Z","avatar_url":"https://github.com/iamspark1e.png","language":"JavaScript","funding_links":[],"categories":["Custom Widget"],"sub_categories":[],"readme":"\u003ch1 align='center'\u003edecap-cms-widget-starter\u003c/h1\u003e\n\n\u003cbr /\u003e\n\u003cp align='center'\u003e\u003ci\u003eA starter template for custom \u003ca href=\"https://decapcms.org/docs/custom-widgets/\" target=\"_blank\"\u003eDecap CMS widget\u003c/a\u003e development, powered with Vite.\u003c/i\u003e\u003c/p\u003e\n\n### Info\n\nA zero config, out-of-box template for developing your own custom Decap CMS Widget, with latest version of Vite.\n\n### Quick Start\n\nFirst, run `npx degit iamspark1e/decap-cms-widget-starter my-widget` or click the \"Use this template\" button on [Github Repo](https://github.com/iamspark1e/decap-cms-widget-starter)\n\nThen get into your project folder, no additional configuration, just run,\n\n```bash\nnpm install\nnpm run dev\n```\n\n\u003e If you need to change running port, you can pass it via environment variable, for example, `PORT=18080 npm run dev`\n\nAfter the dev server started, you can modify the `Control.jsx` and `Preivew.jsx` as you wish, dev server will be refreshed automatically with HMR, powered by Vite.\n\n### Developing Widget\n\n\u003e More details about writing codes in widgets, you can read this [official doc](https://decapcms.org/docs/custom-widgets/#writing-custom-widgets-as-a-separate-package).\n\nThe whole project is focused on the `src/main.js`, the only entry which will mount your customized \"Control\" and \"Preview\" components on the `window`, so after `main.js` is bundled, you can call `CMS.registerWidget` to register your widget like this:\n\n```html\n\u003cscript src=\"./main.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n    // the \"CMS\" is exposed by \"decap-cms-app\"\n    CMS.registerWidget('test', window.StarterControl, window.StarterPreview);\n\u003c/script\u003e\n```\n\n\u003e Remember to rename \"StarterControl\" and \"StarterPreview\" to your own widget name !\n\nWhen project started, the `public/config.yml` will be read to setup CMS environment, so you can add a more complicate collection for your usage.\n\n### Testing Widget\n\n\u003e Before testing in \"Preview mode\", please build files first.\n\nIf you want to test your built widget file, you can start a \"Preview\" mode via `npm run preview`, that will serve files in the `dist` folder. \n\n### Production \u0026 Publishing Widget\n\n```bash\nnpm run build\nnpm version release\nnpm run publish\n```\n\n### Questions\n\nIf you have any questions, please leave me an issue, thanks~","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fiamspark1e%2Fdecap-cms-widget-starter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fiamspark1e%2Fdecap-cms-widget-starter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fiamspark1e%2Fdecap-cms-widget-starter/lists"}