{"id":18904960,"url":"https://github.com/concon121/electron-designer","last_synced_at":"2026-03-04T17:30:18.697Z","repository":{"id":94143496,"uuid":"90520803","full_name":"concon121/electron-designer","owner":"concon121","description":"Design web pages using mustache templates","archived":false,"fork":false,"pushed_at":"2017-05-07T10:25:25.000Z","size":923,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-12-31T10:33:21.642Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"cc0-1.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/concon121.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","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":"2017-05-07T09:05:17.000Z","updated_at":"2018-03-20T06:45:30.000Z","dependencies_parsed_at":"2023-04-06T22:03:00.286Z","dependency_job_id":null,"html_url":"https://github.com/concon121/electron-designer","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/concon121%2Felectron-designer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/concon121%2Felectron-designer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/concon121%2Felectron-designer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/concon121%2Felectron-designer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/concon121","download_url":"https://codeload.github.com/concon121/electron-designer/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239889026,"owners_count":19713702,"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":[],"created_at":"2024-11-08T09:09:57.215Z","updated_at":"2026-03-04T17:30:18.625Z","avatar_url":"https://github.com/concon121.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# electron-designer\n\nElectron Designer is a simple demo [Electron](https://electron.atom.io/) application which allows you to build up a web page based on a limited set of [Mustache.js](https://github.com/janl/mustache.js) templates, acting as a means to view different combinations of your partial templates while you develop them.\n\n## Prerequisites\nPlease ensure that you have these installed on your system before you begin.\n-   nodejs\n\n## Starting Up\n\nInstall the project dependencies:\n```\nnpm install -g jsttojs\nnpm install\n```\n\nStart the application:\n```\nnpm start\n```\n\nPre-compile mustache templates:\n```\njsttojs . views/compiled_views.js --ext mustache\n```\nYou can add the ```--watch``` flag to the jsttojs command to constantly compile the templates as you change them.\n\n## Usage\n\n### The Template Toolbar\n\nThe template toolbar provides an ordered and categorised list of all the available templates that you can view.\n\n![template-toolbar](images/template-toolbar.PNG)\n\nClicking any of the options in the template toolbar will put the default template for that option on the screen, ready for you to start editing.\n\nThe template toolbar goes down the left hand side of the screen.\n\n### The Action Toolbar\n\nThe action toolbar gives you the ability to interact with the controls and form elements that you put on the screen.\n\n![action-toolbar](images/action-toolbar.PNG)\n\nFrom left to right:\n\n*   **Edit** - Click on the control you want to edit.  When the background colour has turned light grey, click the pencil icon in the toolbar at the top of the page.  An overlay will appear with some input field for you to enter the new content.  While the overlay is active, clicking the pencil icon again or the exit task button will close the overlay without saving any changes.  Clicking the save progress button will persist any changes you make and you will see them reflected on the screen.\n*   **Delete** - Click on the control you want to delete.  When the background colour has turned light grey, click the trash icon in the toolbar at the top of the page.  The selected control will disappear from the screen.\n*   **Select All** - If you click the check button in the action toolbar at the top of the page then all controls currently on the page will be selected.  Click it again and everything will be de-selected.\n\nThe action toolbar goes along the top of the screen.\n\n### Misc\n\n#### Selecting Controls\n\n![selecting-controls](images/selecting.PNG)\n\n#### Select All\n\n![select-all](images/select-all.PNG)\n\n#### Editing Controls\n\n![editing](images/editing.PNG)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fconcon121%2Felectron-designer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fconcon121%2Felectron-designer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fconcon121%2Felectron-designer/lists"}