{"id":20314653,"url":"https://github.com/dashpilot/html-template-editor","last_synced_at":"2026-07-02T18:33:54.375Z","repository":{"id":135256079,"uuid":"345138405","full_name":"dashpilot/html-template-editor","owner":"dashpilot","description":"Make any HTML template editable!","archived":false,"fork":false,"pushed_at":"2021-03-06T17:32:12.000Z","size":81,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-27T09:27:14.593Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"html-template-editor-git-main-dashpilot.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}},"created_at":"2021-03-06T16:18:49.000Z","updated_at":"2021-03-06T17:32:14.000Z","dependencies_parsed_at":null,"dependency_job_id":"abaebdcf-2d6f-4d09-a35c-8736db8f66d0","html_url":"https://github.com/dashpilot/html-template-editor","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/dashpilot/html-template-editor","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dashpilot%2Fhtml-template-editor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dashpilot%2Fhtml-template-editor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dashpilot%2Fhtml-template-editor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dashpilot%2Fhtml-template-editor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dashpilot","download_url":"https://codeload.github.com/dashpilot/html-template-editor/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dashpilot%2Fhtml-template-editor/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":35059245,"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-02T02:00:06.368Z","response_time":173,"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":"2024-11-14T18:16:11.712Z","updated_at":"2026-07-02T18:33:54.330Z","avatar_url":"https://github.com/dashpilot.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# html-template-editor\n\nMake any HTML template editable!\n\nSimple on-page editor that features inline-editing, image upload and resize, adding/sorting/removing template blocks. Easy to integrate into any HTML template and independant of CSS frameworks (Can be used with Bootstrap/Tailwind/Uikit/Bulma/Custom CSS/etc).\n\n## Demo\n\n\u003chttps://html-template-editor.vercel.app/\u003e\n\n## How to\n\nIntegrate the editor with any existing HTML template by adding the following to the head of each page:\n\n    \u003cscript\u003e\n      const inline_editor = 'h1,h2,h3,h4,h5,p'; // which element should be inline-editable\n      const img_width = 800; // resize images to this width\n      const page_id = 'page'; // id of the div that contains the page's contents, see below\n    \u003c/script\u003e\n\n    \u003clink rel='stylesheet' href='/global.css'\u003e\n    \u003cscript defer src='/build/bundle.js'\u003e\u003c/script\u003e\n\nWrap the part of the page that you want to save in a div with an id of `page`:\n\n    \u003cdiv id=\"page\"\u003e\n      \u003c!-- This part will be saved --\u003e\n    \u003c/div\u003e\n\nThat's all! No further changes required!\n\n## Creating content blocks that users can add to the page\n\nTo create your own content blocks, just wrap your custom HTML in a 'template'-tag, add a unique id and the following data-attributes:\n\n`data-name`: The name of the content block as it should appear in the interface\n`data-insert`: the wrapper element the content block should be inserted into\n\n    \u003ctemplate id=\"post\" data-name=\"Post\" data-insert=\"main\"\u003e\n\n        \t\u003c!-- Your custom content-block --\u003e\n    \t\u003csection class=\"layout-post\"\u003e\n    \t\t\u003cdiv id=\"item-4\" class=\"container editable\"\u003e\n    \t\t\t\u003ch2\u003eMauris eleifend ligula\u003c/h2\u003e\n    \t\t\t\u003cp\u003eVivamus in nisi commodo, auctor magna vel, viverra turpis.\u003cp\u003e\n    \t\t\u003c/div\u003e\n    \t\u003c/section\u003e\n\n    \u003c/template\u003e\n\nCheck out the example on: \u003chttps://html-template-editor.vercel.app/\u003e to see how it all works together\n\n## Backend\n\nThe editor (currently?) has no back-end, but exposes a 'save'-function so you can easily integrate your own prefered back-end. To save data to your own back-end, just create a save-function that takes the html as a parameter, for example:\n\n    function save(html){\n\n      // validate user and validate data\n      // ...\n\n      // then save to you backend\n      var opts = {};\n      opts.html = html;\n      fetch('/path/to/your/api', {\n        method: 'post',\n        body: JSON.stringify(opts)\n      }).then(function(response) {\n        return response.json();\n      }).then(function(data) {\n        console.log('Saved.');\n      });\n\n    }\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdashpilot%2Fhtml-template-editor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdashpilot%2Fhtml-template-editor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdashpilot%2Fhtml-template-editor/lists"}