{"id":28925543,"url":"https://github.com/svagco/window","last_synced_at":"2026-05-04T22:43:44.441Z","repository":{"id":57163853,"uuid":"147890257","full_name":"svagco/window","owner":"svagco","description":"A simple macOS window with a shadow and toolbar.","archived":false,"fork":false,"pushed_at":"2018-09-10T23:16:41.000Z","size":71,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-05-20T11:56:47.476Z","etag":null,"topics":["javascript","macos","mockup","svg","ui"],"latest_commit_sha":null,"homepage":"https://svag.co","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/svagco.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-09-08T01:28:39.000Z","updated_at":"2018-09-10T23:16:42.000Z","dependencies_parsed_at":"2022-08-31T22:22:53.493Z","dependency_job_id":null,"html_url":"https://github.com/svagco/window","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"purl":"pkg:github/svagco/window","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/svagco%2Fwindow","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/svagco%2Fwindow/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/svagco%2Fwindow/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/svagco%2Fwindow/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/svagco","download_url":"https://codeload.github.com/svagco/window/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/svagco%2Fwindow/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261146602,"owners_count":23115827,"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":["javascript","macos","mockup","svg","ui"],"created_at":"2025-06-22T11:09:15.063Z","updated_at":"2026-05-04T22:43:44.436Z","avatar_url":"https://github.com/svagco.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @svag/window\n\n[![npm version](https://badge.fury.io/js/%40svag%2Fwindow.svg)](https://npmjs.org/package/@svag/window)\n\n`@svag/window` is a simple macOS-style window with a shadow and toolbar.\n\n```sh\nyarn add -E @svag/window\n```\n\n## Table Of Contents\n\n- [Table Of Contents](#table-of-contents)\n- [API](#api)\n  * [`window(options: WindowOptions): string`](#windowoptions-windowoptions-string)\n    * [`WindowOptions`](#windowoptions)\n    * [without a shadow](#without-a-shadow)\n- [TODO](#todo)\n- [Copyright](#copyright)\n\n## API\n\nThe package is available by importing its default function:\n\n```js\nimport Window from '@svag/window'\n```\n\n### `window(`\u003cbr/\u003e\u0026nbsp;\u0026nbsp;`options: WindowOptions,`\u003cbr/\u003e`): string`\n\nCreates a complete `SVG` representing a macOS window.\n\n\u003cimg alt=\"window of a terminal\" src=\"https://raw.github.com/svagco/window/master/images/window.svg?sanitize=true\"\u003e\n\n__\u003ca name=\"windowoptions\"\u003e`WindowOptions`\u003c/a\u003e__\n\n| Name | Type | Description | Default |\n| ---- | ---- | ----------- | ------- |\n| __content*__ | _string_ | The content to display inside of the window. | - |\n| __width*__ | _number_ | The width of the content. | - |\n| __height*__ | _number_ | The height of the content. | - |\n| backgroundColor | _string_ | The color of the window. | `#000000` |\n| foregroundColor | _string_ | The foreground color of the container group which will hold the content. | `#FFFFFF` |\n| noStretch | _boolean_ | Do not stretch the SVG when embedded as an image. This is achieved by explicitly setting width and height attributes on the `svg` element. | `false` |\n| title | _string_ | An optional title for the window. | - |\n| attributes | _object_ | Any additional attributes to set on the holder of the content, e.g., `font-family`. | - |\n| minWidth | _number_ | The minimum width that the window should take. If the content's width is greater than this value, the height will adjust to the content. | - |\n| minHeight | _number_ | The minimum height that the window should take. If the content's height is greater than this value, the height will adjust to the content. | - |\n| paddingY | _number_ | The padding on the Y-axis (top and bottom). | `5` |\n| paddingX | _number_ | The padding on the X-axis (left and right). | `5` |\n| noShadow | _boolean_ | Disable the dropping shadow. | `false` |\n| minify | _boolean_ | Remove whitespace between tags (e.g., between `\u003e` and `\u003c`). If there are any problems with generated SVG, this could be disabled. | `true` |\n\n```js\nimport { makeElement } from '@svag/lib'\nimport Window from '@svag/window'\n\nconst line = makeElement('text', {\n  attributes: {\n    'font-family': 'Monaco, Courier',\n    'font-size': '12px',\n    x: 0,\n    y: 10,\n  },\n  content: `Last login: ${new Date().toDateString()} on ttys013`,\n})\nconst line2 = makeElement('text', {\n  attributes: {\n    'font-family': 'Monaco, Courier',\n    'font-size': '12px',\n    x: 0,\n    y: 25,\n  },\n  content: 'svag-macbook:~ svag$ ',\n})\n\nconst res = Window({\n  title: '🚞 Terminal',\n  width: 350,\n  height: 100,\n  noStretch: true,\n  content: [line, line2],\n  minify: false,\n})\n```\n\n```svg\n\u003c?xml version=\"1.0\" encoding=\"utf-8\"?\u003e\n\u003csvg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n     viewBox=\"0, 0, 472, 244\" width=\"472px\" height=\"244px\"\u003e\n  \u003cg transform=\"translate(55, 25)\" filter=\"url(#shadow)\"\u003e\n    \u003cdefs\u003e\n      \u003cfilter x=\"-16%\" y=\"-19%\" width=\"132%\" height=\"180%\" id=\"shadow\"\u003e\n        \u003cfeOffset dy=\"25\" in=\"SourceAlpha\" result=\"o\"/\u003e\n        \u003cfeGaussianBlur stdDeviation=\"27.5\" in=\"o\" result=\"b\"/\u003e\n        \u003cfeColorMatrix values=\"0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.5 0\" in=\"b\"/\u003e\n      \u003c/filter\u003e\n    \u003c/defs\u003e\n    \u003crect height=\"132\" width=\"360\" rx=\"6\" ry=\"6\" fill=\"white\"/\u003e\n  \u003c/g\u003e\n  \u003cg transform=\"translate(55, 25)\" fill=\"none\"\u003e\n    \u003crect width=\"360\" height=\"132\" rx=\"6\" ry=\"6\" stroke=\"#000000\" stroke-opacity=\"0.2\"/\u003e\n    \u003cg id=\"Toolbar\"\u003e\n      \u003cdefs\u003e\n        \u003clinearGradient x1=\"50%\" x2=\"50%\" y2=\"100%\" id=\"toolbar\"\u003e\n          \u003cstop stop-color=\"#FFFFFF\" offset=\"0%\"/\u003e\n          \u003cstop stop-color=\"#F5F4F5\" offset=\"5%\"/\u003e\n          \u003cstop stop-color=\"#D3D3D3\" offset=\"100%\"/\u003e\n        \u003c/linearGradient\u003e\n      \u003c/defs\u003e\n      \u003cpath d=\"M6,0 L354,0 C 357 0, 360 3, 360 6 L360,22 L0,22 L0,16 L0,6 C 0 3, 3 0, 6 0\"\n            fill=\"url(#toolbar)\"/\u003e\n      \u003ctext x=\"180\" y=\"16\" font-family=\"HelveticaNeue, Helvetica Neue\" font-size=\"13\"\n            letter-spacing=\"0.4\" fill=\"#464646\" text-anchor=\"middle\"\u003e\n        🚞 Terminal\n      \u003c/text\u003e\n      \u003cg transform=\"translate(9, 6)\"\u003e\n        \u003cg\u003e\n          \u003ccircle stroke=\"#E33E32\" stroke-width=\"1\" cx=\"5\" cy=\"5\" r=\"5.5\"/\u003e\n          \u003ccircle fill=\"#FF5F52\" cx=\"5\" cy=\"5\" r=\"5.25\"/\u003e\n        \u003c/g\u003e\n        \u003cg\u003e\n          \u003ccircle stroke=\"#E2A100\" stroke-width=\"1\" cx=\"25\" cy=\"5\" r=\"5.5\"/\u003e\n          \u003ccircle fill=\"#FFBE05\" cx=\"25\" cy=\"5\" r=\"5.25\"/\u003e\n        \u003c/g\u003e\n        \u003cg\u003e\n          \u003ccircle stroke=\"#17B230\" stroke-width=\"1\" cx=\"45\" cy=\"5\" r=\"5.5\"/\u003e\n          \u003ccircle fill=\"#15CC35\" cx=\"45\" cy=\"5\" r=\"5.25\"/\u003e\n        \u003c/g\u003e\n      \u003c/g\u003e\n    \u003c/g\u003e\n    \u003cpath d=\"M360,22 L360,126 C 360 129, 357 132, 354 132 L6,132 C 3 132, 0 129, 0 126 L0,22 Z\"\n          fill=\"#FFFFFF\"/\u003e\n    \u003cline y1=\"22\" x2=\"360\" y2=\"22\" stroke=\"#7E7E7E\" shape-rendering=\"crispEdges\"/\u003e\n    \u003cg transform=\"translate(5, 28)\" fill=\"#000000\"\u003e\n      \u003ctext font-family=\"Monaco, Courier\" font-size=\"12px\" x=\"0\" y=\"10\"\u003e\n        Last login: Tue Sep 11 2018 on ttys013\n      \u003c/text\u003e\n      \u003ctext font-family=\"Monaco, Courier\" font-size=\"12px\" x=\"0\" y=\"25\"\u003e\n        svag-macbook:~ svag$ \n      \u003c/text\u003e\n    \u003c/g\u003e\n  \u003c/g\u003e\n\u003c/svg\u003e\n```\n\nTo generate a window \u003ca name=\"without-a-shadow\"\u003ewithout a shadow\u003c/a\u003e, the `noShadow` option can be set. When `minify` attribute is not set to `false`, the whitespace will be removed.\n\n```js\nimport { makeElement } from '@svag/lib'\nimport Window from '@svag/window'\n\nconst line = makeElement('text', {\n  name: 'text',\n  attributes: {\n    'font-family': 'Monaco, Courier',\n    'font-size': '12px',\n    x: 0,\n    y: 10,\n  },\n  content: `Last login: ${new Date().toDateString()} on ttys013`,\n})\nconst line2 = makeElement('text', {\n  attributes: {\n    'font-family': 'Monaco, Courier',\n    'font-size': '12px',\n    x: 0,\n    y: 25,\n  },\n  content: 'svag-macbook:~ svag$ ',\n})\n\nconst res = Window({\n  title: '🚞 Terminal',\n  width: 350,\n  height: 100,\n  noStretch: true,\n  content: [line, line2],\n  noShadow: true,\n})\n```\n\n```svg\n\u003c?xml version=\"1.0\" encoding=\"utf-8\"?\u003e\u003csvg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n     viewBox=\"0, 0, 362, 134\" width=\"362px\" height=\"134px\"\u003e\u003cg transform=\"translate(1, 1)\" fill=\"none\"\u003e\u003crect width=\"360\" height=\"132\" rx=\"6\" ry=\"6\" stroke=\"#000000\" stroke-opacity=\"0.2\"/\u003e\u003cg id=\"Toolbar\"\u003e\u003cdefs\u003e\u003clinearGradient x1=\"50%\" x2=\"50%\" y2=\"100%\" id=\"toolbar\"\u003e\u003cstop stop-color=\"#FFFFFF\" offset=\"0%\"/\u003e\u003cstop stop-color=\"#F5F4F5\" offset=\"5%\"/\u003e\u003cstop stop-color=\"#D3D3D3\" offset=\"100%\"/\u003e\u003c/linearGradient\u003e\u003c/defs\u003e\u003cpath d=\"M6,0 L354,0 C 357 0, 360 3, 360 6 L360,22 L0,22 L0,16 L0,6 C 0 3, 3 0, 6 0\"\n            fill=\"url(#toolbar)\"/\u003e\u003ctext x=\"180\" y=\"16\" font-family=\"HelveticaNeue, Helvetica Neue\" font-size=\"13\"\n            letter-spacing=\"0.4\" fill=\"#464646\" text-anchor=\"middle\"\u003e\n        🚞 Terminal\n      \u003c/text\u003e\u003cg transform=\"translate(9, 6)\"\u003e\u003cg\u003e\u003ccircle stroke=\"#E33E32\" stroke-width=\"1\" cx=\"5\" cy=\"5\" r=\"5.5\"/\u003e\u003ccircle fill=\"#FF5F52\" cx=\"5\" cy=\"5\" r=\"5.25\"/\u003e\u003c/g\u003e\u003cg\u003e\u003ccircle stroke=\"#E2A100\" stroke-width=\"1\" cx=\"25\" cy=\"5\" r=\"5.5\"/\u003e\u003ccircle fill=\"#FFBE05\" cx=\"25\" cy=\"5\" r=\"5.25\"/\u003e\u003c/g\u003e\u003cg\u003e\u003ccircle stroke=\"#17B230\" stroke-width=\"1\" cx=\"45\" cy=\"5\" r=\"5.5\"/\u003e\u003ccircle fill=\"#15CC35\" cx=\"45\" cy=\"5\" r=\"5.25\"/\u003e\u003c/g\u003e\u003c/g\u003e\u003c/g\u003e\u003cpath d=\"M360,22 L360,126 C 360 129, 357 132, 354 132 L6,132 C 3 132, 0 129, 0 126 L0,22 Z\"\n          fill=\"#FFFFFF\"/\u003e\u003cline y1=\"22\" x2=\"360\" y2=\"22\" stroke=\"#7E7E7E\" shape-rendering=\"crispEdges\"/\u003e\u003cg transform=\"translate(5, 28)\" fill=\"#000000\"\u003e\u003ctext font-family=\"Monaco, Courier\" font-size=\"12px\" x=\"0\" y=\"10\"\u003e\n        Last login: Tue Sep 11 2018 on ttys013\n      \u003c/text\u003e\u003ctext font-family=\"Monaco, Courier\" font-size=\"12px\" x=\"0\" y=\"25\"\u003e\n        svag-macbook:~ svag$ \n      \u003c/text\u003e\u003c/g\u003e\u003c/g\u003e\u003c/svg\u003e\n```\n\n\u003cimg alt=\"window without a shadow\" src=\"https://raw.github.com/svagco/window/master/images/no-shadow.svg?sanitize=true\"\u003e\n\n## TODO\n\n- [ ] Add cursor to the preview.\n\n## Copyright\n\n(c) [SVaG][1] 2018\n\n[1]: https://svag.co\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsvagco%2Fwindow","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsvagco%2Fwindow","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsvagco%2Fwindow/lists"}