{"id":19364477,"url":"https://github.com/math2001/live-svg","last_synced_at":"2025-04-23T08:08:39.047Z","repository":{"id":74806331,"uuid":"103813517","full_name":"math2001/live-svg","owner":"math2001","description":"View your SVGs in the browser, and get them updated as soon as you save!","archived":false,"fork":false,"pushed_at":"2017-09-26T06:22:46.000Z","size":272,"stargazers_count":4,"open_issues_count":1,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-23T08:08:33.664Z","etag":null,"topics":["live-preview","svg"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/math2001.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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-09-17T08:17:34.000Z","updated_at":"2019-02-26T12:18:49.000Z","dependencies_parsed_at":null,"dependency_job_id":"8f2c0d47-2a90-4334-b56f-fdc26082c6ca","html_url":"https://github.com/math2001/live-svg","commit_stats":{"total_commits":30,"total_committers":1,"mean_commits":30.0,"dds":0.0,"last_synced_commit":"48b373a6596f2110bf6f2c23c6e6c3739903580a"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/math2001%2Flive-svg","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/math2001%2Flive-svg/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/math2001%2Flive-svg/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/math2001%2Flive-svg/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/math2001","download_url":"https://codeload.github.com/math2001/live-svg/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250395288,"owners_count":21423400,"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":["live-preview","svg"],"created_at":"2024-11-10T07:37:29.728Z","updated_at":"2025-04-23T08:08:39.025Z","avatar_url":"https://github.com/math2001.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# `live-svg`\n\n`live-svg` is a simple script that will run a server to serve `.svg` files and\nupdate them live as soon as you save.\n\nIt doesn't reload the entire page, it just updates the svg codes in the browser.\n\n## Installation\n\n```\n$ npm install -g live-svg\n```\n\nOr\n\n```\n$ yarn global add live-svg\n```\n\n## Demo\n\n![demo of live-svg](demo.gif)\n\nThe editor is VIM on wsltty. To increase/decrease numbers in VIM, just press\n\u003ckbd\u003ectrl+a\u003c/kbd\u003e and \u003ckbd\u003ectrl+x\u003c/kbd\u003e.\n\n## Usage\n\nStart `live-svg` by just running it from your favorite terminal.\n\nOpen your browser at \u003chttp://localhost:3663\u003e followed by the\nrelative path to the svg(s) you want to preview.\n\n```\n- root\n    - subdirectory\n        - mysvg.svg\n```\n\nSo, if you run `live-svg` from root, you'll need to open\n\u003chttp://localhost:6336/subdirectory/mysvg.svg\u003e\n\nIt'll automatically watch the files that are open, and reload them as soon as you\nsave.\n\nIt makes learning to write SVG by hand or simply editing one much easier.\n\nThere are different options:\n\n#### `--port \u003cint\u003e`\n\nThe port to run the server on. By default it's `6336`, because 336 because it's\nthe sum of the ASCII values of each letter in `svg`, and an extra 6 at the start\nbecause [palindromes number][] are cool :smile:\n\n#### `--cwd`\n\nBy default, it's the where you currently are. But, using the previous example, if\nyou ran: `live-svg --cwd subdirectory/`, you would've had to open\n\u003chttp://localhost:6336/mysvg.svg\u003e\n\n#### `--auto-exit`\n\nAutomatically exit as soon as every tab previewing svgs on the server created by\nlive-svg in every browser.\n\nBasically, if you close the last svg in the browser, this program will exit.\n\n#### The rest?\n\nEvery other arguments will be considered as file names, and will automatically be\nopen in the browser by default.\n\n### Absolute live\n\nIf you want to get browser be updated as soon as you make one modification, that\nmeans you have to *save* as soon as you make one modification.\n\nTherefore, it depends on your editors, but it shouldn't be too hard.\n\n#### Sublime Text\n\nJust use the plugin [auto-save](https://packagecontrol.io/packages/auto-save).\n\n#### Vim\n\n```vim\n:autocmd TextChanged,TextChangedI \u003cbuffer\u003e write\u003cCR\u003e\n```\n\nI recommend you bind it to a shortcut, for example\n\n```vim\nnnoremap \u003cleader\u003el :autocmd TextChanged,TextChangedI \u003cbuffer\u003e write\u003cCR\u003e\n```\n\n(feel free to contribute to add your favorite editor)\n\n[Palindromes number]: https://en.wikipedia.org/wiki/Palindromic_number\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmath2001%2Flive-svg","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmath2001%2Flive-svg","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmath2001%2Flive-svg/lists"}