NativeScript Snippets

Type ns-, get the element. Every NativeScript UI component, layout, gesture, and iOS icon — as a snippet, in your flavor's syntax.

Angular · Core (XML) · Vue · React · Svelte

Built for @nativescript/core v9 — currently 9.0.20.

Stop hand-typing <StackLayout>, memorizing which props a ListView takes, or rewriting the same markup when you switch frameworks. This pack ships every NativeScript element three ways — bare, with properties, and fully documented — for all five flavors, generated straight from @nativescript/core v9 types so the properties and events always match the framework.

Full prefix reference → · Snippet spec & generation pipeline →

Quick Start

Install the extension (see below).
Open a NativeScript view — .html (Angular), .xml (Core), .vue, .tsx/.jsx (React), or .svelte.
Type a prefix — ns-button, ns-stack-layout, ns-list-view, ns-tap, ns-icon-stop — and accept it from IntelliSense.
Tab through the property placeholders and fill them in. Done.

Suffix cheat-sheet: ns-button → the bare tag · ns-button-prop → every property as a Tab-stop · ns-button-comp → properties + events + an inline doc table.

Highlights

One prefix, every flavor. ns-button works whether you're in Angular HTML, Core XML, a Vue SFC, a React .tsx, or a Svelte component — the snippet emits the right tag case and event syntax for each.
Three levels of detail. Bare for speed, -prop for every property as a Tab-stop, -comp for properties + events + a documented property/event table inline.
Generated from @nativescript/core v9 (currently 9.0.20). Every property, type hint, and event is extracted from the framework's TypeScript types — the snippets can't drift from the API.
Smart hints. Enum props expand to their allowed values (orientation="(horizontal|vertical)"), and two-way-bindable props use each flavor's binding syntax (Angular [(checked)], Svelte bind:checked).
Everything you reach for. Every UI component, all seven layout containers, ready-made example layouts (ns-<layout>-snippet-N), eight gestures, and 24 iOS system-icon values.
Pure, declarative, private. No runtime, no dependencies, no telemetry — just snippet JSON contributed to VS Code.

Usage

Every component and layout ships in three variants. Here's the same Switch, three ways — exactly what lands in your editor:

1. Bare — `ns-switch`

<Switch></Switch>

2. Property — `ns-switch-prop`

Every property becomes a Tab-stop. Two-way-bindable props use the flavor's binding syntax:

<Switch
  [(checked)]="boolean"
  offBackgroundColor="Color"></Switch>

3. Complete — `ns-switch-comp`

Properties and events, plus an inline doc comment listing each one — and a reminder of how many inherited View properties the element also accepts:

<Switch
  checked="boolean"
  offBackgroundColor="Color"
  (checkedChange)="">
</Switch>
<!--
Properties
  checked (boolean) — Gets or sets if a switch is checked or not.
  offBackgroundColor (Color) — Gets or sets the background color of the Switch when it is turned off.

Events
  checkedChange

+ 118 inherited View properties (id, class, width, height, margin, backgroundColor, …) and 12 events (loaded, unloaded, layoutChanged, …).
-->

Bigger elements scale the same way — ns-button-prop lays out every one of Button's properties and ns-text-field-prop every property of TextField, each as a numbered Tab-stop you can fill or skip.

The same prefix, every flavor

ns-button adapts to whichever file you're in — PascalCase tags for Angular/Core/Vue, camelCase for React/Svelte, and the right event syntax for each:

<!-- Angular (.html) -->
<Button (tap)="onTap()"></Button>

<!-- Core (.xml) -->
<Button tap="onTap" />

<!-- Vue (.vue) -->
<Button @tap="onTap" />

<!-- React (.tsx / .jsx) -->
<button onTap={onTap} />

<!-- Svelte (.svelte) -->
<button on:tap={onTap} />

Layouts

All seven layout containers — ns-stack-layout, ns-grid-layout, ns-flexbox-layout, ns-dock-layout, ns-absolute-layout, ns-wrap-layout, ns-root-layout — ship the three variants, plus ready-made example layouts under ns-<layout>-snippet-N:

<!-- ns-dock-layout-snippet-2 -->
<DockLayout width="210" height="210" backgroundColor="lightgray" stretchLastChild="true">
  <Label text="left" dock="left" backgroundColor="red"></Label>
  <Label text="top" dock="top" backgroundColor="green"></Label>
  <Label text="right" dock="right" backgroundColor="blue"></Label>
  <Label text="bottom" dock="bottom" backgroundColor="yellow"></Label>
</DockLayout>

Gestures

Eight gesture bindings, one prefix each — adapted to the flavor's event syntax:

Prefix	Angular	Core	Vue	React	Svelte
`ns-tap`	`(tap)=""`	`tap=""`	`@tap=""`	`onTap={}`	`on:tap={}`

…plus ns-doubleTap, ns-longPress, ns-swipe, ns-pan, ns-pinch, ns-rotation, and ns-touch.

iOS system icons (Angular + Core)

ns-icon-* expands to the numeric ios.systemIcon value for an ActionItem — e.g. ns-icon-stop → 14:

<ActionItem ios.systemIcon="14"></ActionItem>

24 icons in all (ns-icon-done, ns-icon-search, ns-icon-trash, …) — see reference.md for the complete list.

Snippets

This extension contributes 805 snippets across five NativeScript flavors, generated from @nativescript/core v9.0.20. See reference.md for the full prefix tables.

Flavor	Language id(s)	Snippets
Angular	`html`	182
Core (XML)	`xml`	179
Vue	`vue`	149
React	`typescriptreact`, `javascriptreact`	143
Svelte	`svelte`	152

Vue and Svelte snippets require the Vue (Volar) and Svelte language extensions respectively — without them VS Code has no vue/svelte language to attach to, and the snippets stay dormant until installed.

Variants

Prefix	Expands to
`ns-<name>`	the bare element
`ns-<name>-prop`	element + its primary properties as tab-stops
`ns-<name>-comp`	properties + events + a documented property/event table
`ns-<layout>-snippet-N`	(layouts only) a complete ready-made example layout

Most prefixes work in every flavor; a few are flavor-specific: ActionBarExtension (Angular only), NavigationButton (not in React), Repeater (not in Vue and React), RootLayout (not in React), SplitView (Angular/Core only).

The same prefix per flavor

Flavor	Language id(s)	per-flavor syntax (illustrative — tag case + property + event)
Angular	`html`	`<Button text="…" (tap)="onTap()">`
Core	`xml`	`<Button text="…" tap="onTap" />`
Vue	`vue`	`<Button text="…" @tap="onTap" />`
React	`typescriptreact`, `javascriptreact`	`<button text="…" onTap={onTap} />`
Svelte	`svelte`	`<button text="…" on:tap={onTap} />`

Installation

Requires VS Code 1.30.0 or later.

Marketplace: Extensions view (Cmd/Ctrl+Shift+X) → search NativeScript Snippets by ElecTreeFrying → Install.
CLI: code --install-extension ElecTreeFrying.nativescript-angular-html-snippets
Direct: VS Code Marketplace listing

Compatibility

VS Code 1.30.0 or later.
Compatible hosts: Cursor, VSCodium, Code Server, and other forks that implement the VS Code API at the same engine version.
Runs in the browser: Works in VS Code for the Web (vscode.dev, github.dev) too — it's a pure declarative extension, so there's no native code to hold it back.
Languages: Angular (html), Core (xml), and React (typescriptreact/javascriptreact) work out of the box; Vue and Svelte require the Vue (Volar) / Svelte language extensions.
Footprint: Pure declarative snippet JSON — zero runtime dependencies.
Telemetry: None. Everything runs locally.

Troubleshooting

If a prefix doesn't expand, snippets don't appear in .vue / .svelte files — including the common case where they fire between elements but not inside an element's opening tag — or a .vue template inserts the Angular form ((tap) instead of @tap), see SUPPORT.md for symptom → cause → fix.

Changelog

See CHANGELOG.md for full release notes.

Contributing

Contributions, bug reports, and feature requests are welcome. Snippets are generated — see SUPPORT.md for the build/validate workflow, and SPEC.md for the snippet grammar and generation pipeline.

Support

This extension is free and always will be. If it's become part of your workflow, here are a few ways to give back:

Star the repo on GitHub
Leave a review on the VS Code Marketplace
Send a donation to any address below

Network	Address
Bitcoin	`bc1q4j2uewfphjmca83905qv37vcl4jh8va5yupl7w`
Solana	`EHtTGyRoDAK44KBGrEoypAWyPpResHUqwufKnuLs7Tyy`
Sui	`0xcaf8ff4a65d7e35d961abd0203180013b7fe974d4fa0313e880c39c45ada2b09`
ERC-20 (Ethereum / Base / Monad / Polygon / HyperEVM)	`0xd25f84Ed2F76dF2F0C8f1207402eF9e15b5d7855`

License

MIT

Name		Name	Last commit message	Last commit date
Latest commit History 17 Commits
.vscode		.vscode
images		images
qa		qa
snippets		snippets
.gitattributes		.gitattributes
.gitignore		.gitignore
.vscodeignore		.vscodeignore
CHANGELOG.md		CHANGELOG.md
CLAUDE.md		CLAUDE.md
LICENSE.md		LICENSE.md
README.md		README.md
SPEC.md		SPEC.md
SUPPORT.md		SUPPORT.md
package-lock.json		package-lock.json
package.json		package.json
reference.md		reference.md

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Repository files navigation

NativeScript Snippets

Quick Start

Highlights

Usage

1. Bare — `ns-switch`

2. Property — `ns-switch-prop`

3. Complete — `ns-switch-comp`

The same prefix, every flavor

Layouts

Gestures

iOS system icons (Angular + Core)

Snippets

Variants

The same prefix per flavor

Installation

Compatibility

Troubleshooting

Changelog

Contributing

Support

Related

License

About

Uh oh!

Releases 6

Uh oh!

Contributors

Uh oh!

Languages

Folders and files

Latest commit

History

Repository files navigation

NativeScript Snippets

Quick Start

Highlights

Usage

1. Bare — ns-switch

2. Property — ns-switch-prop

3. Complete — ns-switch-comp

The same prefix, every flavor

Layouts

Gestures

iOS system icons (Angular + Core)

Snippets

Variants

The same prefix per flavor

Installation

Compatibility

Troubleshooting

Changelog

Contributing

Support

Related

License

About

Topics

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases 6

Uh oh!

Contributors

Uh oh!

Languages

1. Bare — `ns-switch`

2. Property — `ns-switch-prop`

3. Complete — `ns-switch-comp`