{"id":17125487,"url":"https://github.com/ijzerenhein/visualformat-editor","last_synced_at":"2025-04-13T06:31:59.029Z","repository":{"id":33289401,"uuid":"36934126","full_name":"IjzerenHein/visualformat-editor","owner":"IjzerenHein","description":"Editor \u0026 previewer for Apple's Visual Format Language (built with autolayout.js)","archived":false,"fork":false,"pushed_at":"2018-11-16T08:04:51.000Z","size":2308,"stargazers_count":90,"open_issues_count":3,"forks_count":7,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-03-26T23:04:44.664Z","etag":null,"topics":["autolayout","autolayout-constraints","autolayout-editor","vfl","visual-format-language"],"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/IjzerenHein.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}},"created_at":"2015-06-05T13:28:24.000Z","updated_at":"2025-02-04T11:52:28.000Z","dependencies_parsed_at":"2022-08-17T19:50:08.669Z","dependency_job_id":null,"html_url":"https://github.com/IjzerenHein/visualformat-editor","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/IjzerenHein%2Fvisualformat-editor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IjzerenHein%2Fvisualformat-editor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IjzerenHein%2Fvisualformat-editor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IjzerenHein%2Fvisualformat-editor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/IjzerenHein","download_url":"https://codeload.github.com/IjzerenHein/visualformat-editor/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248674658,"owners_count":21143760,"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":["autolayout","autolayout-constraints","autolayout-editor","vfl","visual-format-language"],"created_at":"2024-10-14T18:45:00.472Z","updated_at":"2025-04-13T06:31:58.592Z","avatar_url":"https://github.com/IjzerenHein.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![Screenshot](screenshot.png)](https://rawgit.com/IjzerenHein/visualformat-editor/master/dist/index.html)\n\n*Click on the image above to start Visual Formatting :D*\n\nThe Visual Format Editor allows you to parse and preview Apple's Visual Format Language. It is built using [Cassowary.js](https://github.com/slightlyoff/cassowary.js), [AutoLayout.js](https://github.com/IjzerenHein/autolayout.js), [famo.us](http://famous.org) and [famous-flex](https://github.com/IjzerenHein/famous-flex).\n\n\n## Query arguments\n\nThe Visual Format Editor can be customized by specifying query-arguments:\n\n|Argument|Type|Description\n|---|---|---|\n|`vfl`|`string`|The vfl definition to display.|\n|`extended`|`0` / `1`|Enables or disables extended vfl mode (default: enabled).|\n|`spacing`|`array`,`number`|Spacing to use (default: 8).|\n|`mode`|`string`|Appearence mode: `default`, `compact`, `nolog`, `preview`.|\n|`settings`|`0` / `1`|Shows or hides the settings pane (default: 1).|\n\nExample:\n\n    visualformat-editor/.../index.html?spacing=[20,10]\u0026extended=0\n\n\n## Visual format meta info\n\nAdditional meta-info can be added in the form of comments. Using this meta-info, you can instruct the viewer to for instance use a specific aspect ratio or a specific color for a sub-view:\n\n```vfl\n//viewport aspect-ratio:3/1 max-height:300\n//colors red:#FF0000 green:#00FF00 blue:#0000FF\n//shapes red:circle green:circle blue:circle\nH:|-[row:[red(green,blue)]-[green]-[blue]]-|\nV:|[row]|\n```\n[View this example online](https://rawgit.com/IjzerenHein/visualformat-editor/master/dist/index.html?vfl=rgb)\n\nMeta-info is also processed by renderers. If you want to set the meta-info only for previewing purposes, then prefix it with a `-`. The following example sets the `max-width` and `max-height` for previewing a mobile layout. The actual layout renderer will ignore this meta-info.\n\n```vfl\n//-viewport max-width:320 max-height:500\n//heights header:44 footer:44\nV:|[col:[header][content][footer]]|\nH:|[col]|\n```\n\n|Category|Property|Example|\n|--------|--------|-------|\n|`viewport`|`aspect-ratio:{width}/{height}`|`//viewport aspect-ratio:16/9`|\n||`width:[{number}/intrinsic]`|`//viewport width:10`|\n||`height:[{number}/intrinsic]`|`//viewport height:intrinsic`|\n||`min-width:{number}`|\n||`max-width:{number}`|\n||`min-height:{number}`|\n||`max-height:{number}`|\n|`spacing`|`[{number}/array]`|`//spacing:8` or `//spacing:[10, 20, 5]`|\n|`widths`|`{view-name}:[{number}/intrinsic]`|`//widths subview1:100`|\n|`heights`|`{view-name}:[{number}/intrinsic]`|`//heights subview1:intrinsic`|\n|`colors`|`{view-name}:{color}`|`//colors redview:#FF0000 blueview:#00FF00`|\n|`shapes`|`{view-name}:[circle/square]`|`//shapes avatar:circle`|\n\n\n## Contribute\n\nIf you like this project and want to support it, show some love\nand give it a star.\n\n\n© 2015 Hein Rutjes\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fijzerenhein%2Fvisualformat-editor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fijzerenhein%2Fvisualformat-editor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fijzerenhein%2Fvisualformat-editor/lists"}