{"id":14155198,"url":"https://github.com/figma/code-snippet-editor-plugin","last_synced_at":"2025-04-05T07:02:17.690Z","repository":{"id":210304877,"uuid":"715776740","full_name":"figma/code-snippet-editor-plugin","owner":"figma","description":"Translate component variants, properties, and more into dynamic code snippets for your design system.","archived":false,"fork":false,"pushed_at":"2025-02-11T14:14:08.000Z","size":637,"stargazers_count":143,"open_issues_count":12,"forks_count":12,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-03-29T06:04:06.841Z","etag":null,"topics":["component-libraries","design-systems","figma","figma-plugin"],"latest_commit_sha":null,"homepage":"https://www.figma.com/community/plugin/1311777988952403297/code-snippet-editor","language":"TypeScript","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/figma.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":"2023-11-07T20:10:53.000Z","updated_at":"2025-03-28T11:04:17.000Z","dependencies_parsed_at":"2024-02-23T19:24:18.707Z","dependency_job_id":"8e5f24c8-4e07-43ba-962c-aedb2ab07529","html_url":"https://github.com/figma/code-snippet-editor-plugin","commit_stats":{"total_commits":65,"total_committers":4,"mean_commits":16.25,"dds":0.09230769230769231,"last_synced_commit":"ece47d8ccfa0f6ab6704ceab2cae11b8dc7d7c09"},"previous_names":["figma/code-snippet-editor-plugin"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/figma%2Fcode-snippet-editor-plugin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/figma%2Fcode-snippet-editor-plugin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/figma%2Fcode-snippet-editor-plugin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/figma%2Fcode-snippet-editor-plugin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/figma","download_url":"https://codeload.github.com/figma/code-snippet-editor-plugin/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247299829,"owners_count":20916190,"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":["component-libraries","design-systems","figma","figma-plugin"],"created_at":"2024-08-17T08:02:27.545Z","updated_at":"2025-04-05T07:02:17.674Z","avatar_url":"https://github.com/figma.png","language":"TypeScript","funding_links":[],"categories":["TypeScript","figma"],"sub_categories":[],"readme":"![](./Code%20Snippet%20Editor%20Banner.png)\n\n# Code Snippet Editor\n\nTranslate component variants, properties, and more into dynamic code snippets for your design system.\n\n- [Overview](#overview)\n- [Templating](#templating)\n  - [Symbols](#symbols)\n  - [Escaping](#escaping)\n  - [Children](#children)\n  - [Conditionals](#conditionals)\n  - [Operators](#operators)\n  - [Samples](#samples)\n  - [Single Line Syntax](#single-line-syntax)\n- [Params](#params)\n  - [`autolayout`](#autolayout)\n  - [`component`](#component)\n  - [`css`](#css)\n  - [`figma`](#figma)\n  - [`node`](#node)\n  - [`property`](#property)\n  - [`variables`](#variables)\n- [Filters](#filters)\n- [Global Templates](#global-templates)\n- [“Details mode”](#details-mode)\n- [Bulk Operations](#bulk-operations)\n- [Full Examples](#full-examples)\n  - [React](#react)\n  - [HTML/CSS](#htmlcss)\n\n## Overview\n\nThis plugin allows you to write and generate code snippets for Figma nodes, which are rendered in the Inspect Panel in [Dev Mode](https://help.figma.com/hc/en-us/articles/15023124644247-Guide-to-Dev-Mode). You can make these code snippets dynamic, by referring to parameters provided by the plugin. Doing this for your component library will bring accurate code snippets to any project that incorporates your design system.\n\nSnippet templates can represent code in any language. A JSX-style template for a main component like this:\n\n```\n\u003cButton\n  onClick={() =\u003e {}}\n  variant=\"{{property.variant}}\"\n  size=\"{{property.size}}\"\n  iconEnd={\u003c{{property.iconEnd|pascal}} /\u003e}\n\u003e\n  {{property.label}}\n\u003c/Button\u003e\n```\n\n...when filled with a selected component instance's properties, will render an accurate code snippet in Figma like this:\n\n```jsx\n\u003cButton\n  onClick={() =\u003e {}}\n  variant=\"primary\"\n  size=\"large\"\n  iconEnd={\u003cIconArrowRight /\u003e}\n\u003e\n  Hello World!\n\u003c/Button\u003e\n```\n\nCode snippets are saved in [shared plugin data](https://www.figma.com/plugin-docs/api/properties/nodes-setsharedplugindata/) using the keys `node.getSharedPluginData(\"codesnippets\", \"snippets\")`. A benefit of shared plugin data is that any plugin can make use of or update these snippets.\n\nYou can add code snippets using the Snippet Editor, which is accessible from the settings menu of the plugin in Dev Mode's Inspect Panel:\n\n![Screenshot 2023-12-04 at 10 14 46 PM](https://github.com/figma/code-snippet-editor-plugin/assets/57682038/5883b5bb-f97e-436d-b6ac-d0c4f2d410fd)\n\nAny snippets added to a Component or ComponentSet will also be propagated to any Instances.\n\nSnippets can either be static or utilize the snippet templating language, which is detailed below.\n\n## Templating\n\nEach line of a code snippet is individually evaluated. Lines of a snippet can include dynamic symbols or conditional statements that refer to parameters from the selected node in Figma. Template parameters are all treated like strings. There is no concept of primitives (number, boolean, etc) in this templating language.\n\n### Symbols\n\nEach line can feature one or more symbols, enclosed in curly brackets like `{{something}}`.\n\n```\nHello {{something}}!\n```\n\nIf `something` was defined as `\"world\"`, this would render `\"Hello world!\"`.\n\nFor a line to render, the appropriate data must be present. If `something` was not defined at all, the line would not render.\n\n### Escaping\n\nIf you need to write the text `\"{{something}}\"` explicitly in your rendered code, you can escape that text with a single backslash prefix like `\"\\{{something}}\"`.\n\nA more realistic example is the Ember language which requires something like `\u003cButton @label={{t \"Value\"}} /\u003e`. To achieve this, the template would escape the outer brackets with a single prefix. `\u003cButton @label=\\{{t \"{{something}}\"}} /\u003e`.\n\n### Children\n\nYou may be interested in rendering nested component instances inside your template. `{{figma.children}}` is a special symbol that will render any immediate children inside the template.\n\nThese children must have snippet templates defined on themselves with the same title and language as the parent template.\n\nCurrently, `figma.children` only looks at immediate children, and will recurse up to 12 levels deep.\n\nIf you want to render something when there are no children, you can also refer to the [`\"node.children\"`](#node) param. `{{?node.children=0}}`.\n\nIndentation for nested templates infers space or tab indents from the beginning of the line that calls `{{figma.children}}`. For example:\n\nA parent node has the template...\n\n```\n\u003cp\u003e\n  {{figma.children}}\n\u003c/p\u003e\n```\n\n...and one of its children has the template...\n\n```\n\u003cspan\u003e\n  Hello world!\n\u003c/span\u003e\n```\n\n...when the parent is selected, it would render...\n\n```\n\u003cp\u003e\n  \u003cspan\u003e\n    Hello world!\n  \u003c/span\u003e\n\u003c/p\u003e\n```\n\n...and when child is selected, it would render...\n\n```\n\u003cspan\u003e\n  Hello world!\n\u003c/span\u003e\n```\n\nThe two spaces prefixing the `  {{figma.children}}` on the parent template are how the template knows how far in to indent the span.\n\n### Conditionals\n\nEach line can start with a conditional statement. Conditionals do not render anything by themselves, they are logical ammendments to the line.\n\nConditionals can be either affirmative with a question mark `{{?something=yes}}`, or negative with an exclamation mark `{{!something=yes}}`. For a line to render, these statements must be validated.\n\nYou can also detect the presence of a property by omitting the equals sign and value. For example, `{{?something}}` and `{{!something}}` would be the affirmative and negative statement for the presence and absence of `something`.\n\n```\n{{?something}}something exists!\n{{!something}}something does not exist!\n{{?something=yes}}something is \"yes\"\n{{!something=yes}}something is not \"yes\"\n```\n\n### Operators\n\nWhile you can add multiple conditional statements to a single line, using an operator is often a better way to express logic. You can make \"or\" statements with `|`, as well as \"and\" statements with `\u0026`.\n\nFor example, `{{?A=1}}{{?B=2}}` can also be expressed as `{{?A=1\u0026B=2}}`.\n\n```\n{{?A=1\u0026B=2}}A is \"1\" AND B is \"2\"\n{{?A=1|B=2}}A is \"1\" OR B is \"2\"\n{{!A=1\u0026B=2}}A is NOT \"1\" AND B is NOT \"2\"\n{{!A=1|B=2}}A is NOT \"1\" OR B is NOT \"2\"\n{{?A=1|B=2|C=3}}A is \"1\" OR B is \"2\" OR C is \"3\"\n```\n\nYou cannot combine \"or\" and \"and\" statements (eg. `A=1|B=2\u0026C=3`). You can express them as separate conditional statements (eg.`{{?A=1|B=2}}{{?C=3}}`).\n\n### Samples\n\nRender `\"hello\"` if `property` exists.\n\n```\n{{?property}}hello\n```\n\nRender `\"hello\"` only if `property` is `\"value\"`.\n\n```\n{{?property=value}}hello\n```\n\nOnly render the value of `property2` if `property1` is `\"value\"`. (Will not render if `property2` does not exist!)\n\n```\n{{?property1=value}}{{property2}}\n```\n\nOnly render the value of `property` if it is not `\"value\"`.\n\n```\n{{!property=value}}{{property}}\n```\n\n#### switch/case\n\n```\n{{?property=a}}line 1\n{{?property=b}}line 2\n{{?property=c}}line 3\n```\n\n#### if/else\n\n```\n{{?property=a}}line 1\n{{!property=a}}line 2\n```\n\n### Single Line Syntax\n\nMultiple lines in a snippet template can be rendered as a single line (e.g., a list of CSS class names). The following would render `hello world`.\n\n```\nhello\\\nworld\n```\n\nSingle line syntax creates scenarios with trailing and leading spaces that may not be desirable. For example...\n\n```\n\"\\\nhello\\\nworld\\\n\"\n```\n\n...renders as `\" hello world \"` with an extra space at the beginning and end.\n\nTo remove a leading or trailing space, you can prefix or suffix an extra `\\`.\n\n```\n\"\\\\\nhello\\\nworld\\\n\\\"\n```\n\nThis would yield `\"hello world\"` due to the extra trailing slash on line one and leading slash on line four.\n\n## Params\n\nThe values you can refer to in symbols and conditional statements are called \"params\". These parameters are formatted as `prefix.param`.\n\n\u003e Enable [\"Details mode\"](#details-mode) to see all the params available for your selection!\n\n\u003e All param values are strings.\n\n### `autolayout`\n\nThe detected [`InferredAutoLayout`](https://www.figma.com/plugin-docs/api/InferredAutoLayoutResult/) properties. Currently limited to\n[`layoutMode`](https://www.figma.com/plugin-docs/api/InferredAutoLayoutResult/#layoutmode), [`layoutWrap`](https://www.figma.com/plugin-docs/api/InferredAutoLayoutResult/#layoutwrap), [`paddingLeft`](https://www.figma.com/plugin-docs/api/InferredAutoLayoutResult/#paddingleft), [`paddingRight`](https://www.figma.com/plugin-docs/api/InferredAutoLayoutResult/#paddingright), [`paddingTop`](https://www.figma.com/plugin-docs/api/InferredAutoLayoutResult/#paddingtop), [`paddingBottom`](https://www.figma.com/plugin-docs/api/InferredAutoLayoutResult/#paddingbottom), [`itemSpacing`](https://www.figma.com/plugin-docs/api/InferredAutoLayoutResult/#itemspacing), [`counterAxisSpacing`](https://www.figma.com/plugin-docs/api/InferredAutoLayoutResult/#counteraxisspacing), [`primaryAxisAlignItems`](https://www.figma.com/plugin-docs/api/InferredAutoLayoutResult/#primaryaxisalignitems), and [`counterAxisAlignItems`](https://www.figma.com/plugin-docs/api/InferredAutoLayoutResult/#counteraxisalignitems)\n\n```json\n{\n  \"autolayout.layoutMode\": \"vertical\",\n  \"autolayout.paddingLeft\": \"10\",\n  \"autolayout.paddingRight\": \"10\",\n  \"autolayout.paddingTop\": \"20\",\n  \"autolayout.paddingBottom\": \"20\",\n  \"autolayout.itemSpacing\": \"10\",\n  \"autolayout.primaryAxisAlignItems\": \"center\",\n  \"autolayout.counterAxisAlignItems\": \"center\"\n}\n```\n\n### `component`\n\nContains data for the primary Component / ComponentSet. This is the \"topmost\" component node (which would have the component property definitions on it). For ComponentSets, variant Components, or their Instances, this will be the ComponentSet's key, type, and name. Any other Component and Instance will be the main Component.\n\n```json\n{\n  \"component.key\": \"8bf1e25fb834ff1ab666c69a08da1cd555746731\",\n  \"component.type\": \"component\",\n  \"component.name\": \"icon-heart\"\n}\n```\n\n### `css`\n\nContains output from [`node.getCSSAsync()`](https://www.figma.com/plugin-docs/api/ComponentNode/#getcssasync). Any CSS returned by the Figma API will be here with the `css.*` prefix.\n\n```json\n{\n  \"css.width\": \"24px\",\n  \"css.height\": \"24px\"\n}\n```\n\n### `figma`\n\n`figma` is not expressed as values in the params object, but rather as the name space for special symbols. Currently [`figma.children`](#children) is the only symbol in this namespace.\n\n### `node`\n\nContains the name, type, and child count (when applicable) for the selected node. If a Component or ComponentSet, `node.key` will also be provided.\n\n```json\n{\n  \"node.name\": \"icon-heart\",\n  \"node.type\": \"instance\",\n  \"node.children\": \"0\"\n}\n```\n\nFor text nodes, `node.characters` will be available. When text styles are applied to the node, `node.textStyle` will be present. Mixed text styles will have a value of [`\"figma.mixed\"`](https://www.figma.com/plugin-docs/api/properties/figma-mixed/).\n\n```json\n{\n  \"node.characters\": \"hello world\",\n  \"node.textStyle\": \"heading-01\"\n}\n```\n\n### `property`\n\nIf the current node is a Component/Instance containing component properties, these will be under the `property.*` params namespace. A basic button component might look like this:\n\n```json\n{\n  \"property.hasIconStart\": \"true\",\n  \"property.iconStart\": \"icon-check\",\n  \"property.hasIconEnd\": \"false\",\n  \"property.iconEnd\": \"placeholder\",\n  \"property.label\": \"hello-world\",\n  \"property.variant\": \"primary\",\n  \"property.state\": \"default\"\n}\n```\n\nIf properties share normalized names, their types will be suffixed with `*.` followed by the first letter of the type lowercased (`i` for instance swap, `b` for boolean, `t` for text, `v` for variant). For instance:\n\n```json\n{\n  \"property.iconStart.b\": \"true\",\n  \"property.iconStart.i\": \"icon-check\",\n  \"property.iconEnd.b\": \"false\",\n  \"property.iconEnd.i\": \"placeholder\"\n}\n```\n\n\u003e If more than one property of the same type share a normalized name, only one value will be available.\n\n### `variables`\n\nThe [`boundVariables`](https://www.figma.com/plugin-docs/api/FrameNode/#boundvariables) on the current node.\n\n```json\n{\n  \"variables.itemSpacing\": \"spacing/spacing-sm\"\n}\n```\n\nIf variables have a [codeSyntax](https://www.figma.com/plugin-docs/api/CodeSyntaxPlatform/), they are represented in addition to the raw name as the first initial of the syntax platform (`WEB`, `ANDROID`, and `iOS` are represented as `variables.*.w`, `variables.*.a`, and `variables.*.i`). For example, a node with a `itemSpacing` bound to a variable named `spacing/spacing-sm` which has a `WEB` codeSyntax set to `--spacing-sm` would have the following \"raw\" values:\n\n```json\n{\n  \"variables.itemSpacing\": \"spacing/spacing-sm\",\n  \"variables.itemSpacing.w\": \"--spacing-sm\"\n}\n```\n\n## Filters\n\nAll strings can be filtered into different cases. The default filter is lowercased hyphenation.\n\nThe available filters are `raw`, `pascal`, `camel`, `snake`, `hyphen` (default), `constant` and referenced with a pipe `|`.\n\nAll filters except for `raw`, will strip non-alphanumeric characters from a string and treat them like a space.\n\nIf `node.name` was \"Figma is great!\", the following template...\n\n```\n{{node.name}}\n{{node.name|raw}}\n{{node.name|pascal}}\n{{node.name|camel}}\n{{node.name|snake}}\n{{node.name|hyphen}}\n{{node.name|constant}}\n```\n\n...would yield\n\n```\nfigma-is-great\nFigma is great!\nFigmaIsGreat\nfigmaIsGreat\nfigma_is_great\nfigma-is-great\nFIGMA_IS_GREAT\n```\n\n## Global Templates\n\nTemplates can also be stored in Figma's [clientStorage](https://www.figma.com/plugin-docs/api/figma-clientStorage/). This is the only way to store templates for non-component nodes in a way that all nodes can inherit them.\n\nThese templates are stored in an object with the following schema:\n\n```json\n{\n  \"types\": {\n    \"FRAME\": [\n      {\n        \"title\": \"Sample\",\n        \"language\": \"HTML\",\n        \"code\": \"\u003cp\u003eHello world! {{node.name}}\u003c/p\u003e\"\n      }\n    ]\n  },\n  \"components\": {\n    \"componentKeyABC123\": [\n      {\n        \"title\": \"Sample React\",\n        \"language\": \"JAVASCRIPT\",\n        \"code\": \"\u003cMyComponent /\u003e\"\n      }\n    ]\n  }\n}\n```\n\nCheck out [./src/index.d.ts](./src/index.d.ts) for documentation on the `CodeSnippetGlobalTemplates` type.\n\nSee [./examples.json](./examples.json) for real world examples.\n\n\u003e Important: Figma's client storage is local to the user, device, and Figma context. If you save global templates in the Figma app and then open Figma in the web browser, the templates will not be available.\n\nSyncing this JSON exernally is on the roadmap, but for now, the only way to add global templates is to select \"Open Global Template Editor\" from the plugin settings menu, paste the JSON into the text box, and hit save.\n\n![Selecting \"Open Global Template Editor\" from the plugin settings menu](https://github.com/figma/code-snippet-editor-plugin/assets/97200987/70c56ee9-1b02-4a45-9ce5-55301a6578c3)\n\n![Global Template Editor UI](https://github.com/figma/code-snippet-editor-plugin/assets/97200987/09d04b40-59f7-43c4-b878-40b319e98c23)\n\n## “Details Mode”\n\nDetails mode can be enabled from the plugin settings menu.\n\nIn addition to the current snippets, it will display any templates being referenced, as well as JSON view of all the [params](#params) available for the current selection.\n\nDetails mode is really useful when you’re building or debuigging your templates!\n\n## Bulk Operations\n\nRunning the plugin in design mode will open a window allowing you to perform bulk operations.\n\nYou can bulk export and import templates for the current file (currently only available for components and component sets).\n\nThe JSON schema for import and export is:\n\n```ts\ntype Templates = {\n  [k: ComponentKey]: Array\u003c{\n    language: CodegenResultLanguage;\n    code: string;\n    title: string;\n  }\u003e;\n};\n```\n\n\u003e More info: [CodegenResult languages](https://www.figma.com/plugin-docs/api/CodegenResult/), [Component key](https://www.figma.com/plugin-docs/api/ComponentNode/#key)\n\nAs an example:\n\n```json\n{\n  \"componentKeyABC123\": [\n    {\n      \"language\": \"JAVASCRIPT\",\n      \"code\": \"\u003cButton\\n  {{?property.state = disabled}}disabled\\n  variant=\\\"{{property.variant}}\\\"\\n  {{?property.iconStart.b=true}}iconStart={\u003c{{property.iconStart.i|pascal}} /\u003e}\\n  {{?property.iconEnd.b=true}}iconEnd={\u003c{{property.iconEnd.i|pascal}} /\u003e}\\n  onClick={() =\u003e {}}\\n\u003e\\n  {{property.label|raw}}\\n\u003c/Button\u003e\",\n      \"title\": \"My Special Template\"\n    }\n  ],\n  \"componentKeyDEF456\": []\n}\n```\n\nWhen importing, if the component key is present in the current file, its templates will be overwritten.\n\nImporting an empty array for a component key will remove all snippets for that component.\n\nComponents whose keys are not definied in the JSON are not effected by an import, even if they have snippets defined in Figma.\n\n## Full Examples\n\n### React\n\nThe following template...\n\n```\n\u003cButton\n  {{!property.state=disabled}}not-disabled\n  {{?property.state=disabled}}disabled\n  variant=\"{{property.variant}}\"\n  {{?property.iconStart.b=true}}iconStart={\u003c{{property.iconStart.i|pascal}} /\u003e}\n  {{?property.iconEnd.b=true}}iconEnd={\u003c{{property.iconEnd.i|pascal}} /\u003e}\n  onClick={() =\u003e {}}\n\u003e\n  {{property.label|raw}}\n\u003c/Button\u003e\n```\n\n...filled with these properties...\n\n```json\n{\n  \"property.iconStart.b\": \"true\",\n  \"property.iconStart.i\": \"icon-check\",\n  \"property.iconEnd.b\": \"false\",\n  \"property.iconEnd.i\": \"placeholder\",\n  \"property.label\": \"hello-world!\",\n  \"property.variant\": \"primary\",\n  \"property.state\": \"default\"\n}\n```\n\n...would render this snippet:\n\n```jsx\n\u003cButton\n  not-disabled\n  variant=\"primary\"\n  iconStart={\u003cIconCheck /\u003e}\n  onClick={() =\u003e {}}\n\u003e\n  Hello World!\n\u003c/Button\u003e\n```\n\n### HTML/CSS\n\nThe following template...\n\n```\n\u003cbutton\n  {{?property.state=disabled}}disabled\n  type=\"button\"\n  class=\"\\\\\nbutton\\\n{{!property.variant=primary}}button-{{property.variant}}\\\n{{!property.size=md}}button-size-{{property.size}}\\\n\\\"\n\u003e\n  {{property.label|raw}}\n\u003c/button\u003e\n```\n\n...filled with these properties...\n\n```json\n{\n  \"property.label\": \"hello-world!\",\n  \"property.variant\": \"secondary\",\n  \"property.size\": \"lg\",\n  \"property.state\": \"default\"\n}\n```\n\n...would render this snippet.\n\n```\n\u003cbutton\n  type=\"button\"\n  class=\"button button-secondary button-size-lg\"\n\u003e\n  Hello World!\n\u003c/button\u003e\n```\n\n...and when filled with these properties...\n\n```json\n{\n  \"property.label\": \"hello-world\",\n  \"property.variant\": \"primary\",\n  \"property.size\": \"md\",\n  \"property.state\": \"disabled\"\n}\n```\n\n...would render this snippet.\n\n```\n\u003cbutton\n  disabled\n  type=\"button\"\n  class=\"button\"\n\u003e\n  Hello World!\n\u003c/button\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffigma%2Fcode-snippet-editor-plugin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffigma%2Fcode-snippet-editor-plugin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffigma%2Fcode-snippet-editor-plugin/lists"}