https://github.com/nativescript-community/ui-canvas

Implement Canvas into your NativeScript apps.
https://github.com/nativescript-community/ui-canvas

android canvas cgcontext ios nativescript

Last synced: 20 days ago
JSON representation

Implement Canvas into your NativeScript apps.

• Host: GitHub
• URL: https://github.com/nativescript-community/ui-canvas
• Owner: nativescript-community
• License: apache-2.0
• Created: 2019-01-27T15:20:36.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2026-04-30T12:21:52.000Z (about 1 month ago)
• Last Synced: 2026-04-30T14:16:29.035Z (about 1 month ago)
• Topics: android, canvas, cgcontext, ios, nativescript
• Language: TypeScript
• Homepage: https://nativescript-community.github.io/ui-canvas/
• Size: 81.5 MB
• Stars: 37
• Watchers: 13
• Forks: 9
• Open Issues: 15
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

• awesome-nativescript - UI Canvas - Implement Canvas into your NativeScript apps. (Plugins / UI Plugins)

README

          
This monorepo contains multiple packages:



ui-canvas

@nativescript-community/ui-canvas



		



	




  Implement Canvas into your NativeScript apps.

  






[](#table-of-contents)

[](#table-of-contents)

## Table of Contents

* [Installation](#installation)

	* [Usage](#usage)

* [Plain NativeScript](#plain-nativescript)

	* [XML](#xml)

* [NativeScript + Angular](#nativescript--angular)

* [NativeScript + Vue](#nativescript--vue)

* [NativeScript + Svelte](#nativescript--svelte)

* [Draw Method ](#draw-method-)

	* [Examples:](#examples)

* [Demos and Development](#demos-and-development)

	* [Repo Setup](#repo-setup)

	* [Build](#build)

	* [Demos](#demos)

* [Contributing](#contributing)

	* [Update repo ](#update-repo-)

	* [Update readme ](#update-readme-)

	* [Update doc ](#update-doc-)

	* [Publish](#publish)

	* [modifying submodules](#modifying-submodules)

* [Questions](#questions)

[](#installation)

[](#installation)

## Installation

Run the following command from the root of your project:

`ns plugin add @nativescript-community/ui-canvas`

### Usage

The nativescript Canvas is based on the [Android Canvas](https://developer.android.com/reference/android/graphics/Canvas) class.

The android API is actually a direct subclass with some Additions

[](#plain-nativescript)

[](#plain-nativescript)

## Plain NativeScript

IMPORTANT: _Make sure you include `xmlns:cv="@nativescript-community/ui-canvas"` on the Page element_

### XML

```XML

    

        

   

```

[](#nativescript--angular)

[](#nativescript--angular)

## NativeScript + Angular

```typescript

import { registerElement } from 'nativescript-angular/element-registry';

import { CanvasView } from '@nativescript-community/ui-canvas';

registerElement('CanvasView', () => CanvasView);

```

```html

```

[](#nativescript--vue)

[](#nativescript--vue)

## NativeScript + Vue

```javascript

import Vue from 'nativescript-vue';

import CanvasPlugin from '@nativescript-community/ui-canvas/vue';

Vue.use(CanvasPlugin);

```

```html

```

[](#nativescript--svelte)

[](#nativescript--svelte)

## NativeScript + Svelte

```ts

// app/app.ts

import { registerNativeViewElement } from 'svelte-native/dom';

registerNativeViewElement('canvasView', () => require('@nativescript-community/ui-canvas').CanvasView);

```

```svelte

    

```

[](#draw-method-)

[](#draw-method-)

## Draw Method 

```ts

import type { Canvas } from '@nativescript-community/ui-canvas';

import { Paint, createRect } from '@nativescript-community/ui-canvas';

import { Color } from '@nativescript/core';

function draw(event: { canvas: Canvas }) {

    const canvas = event.canvas;

    const paint = new Paint();

    paint.setColor(new Color('black'));

    paint.strokeWidth = 10;

    canvas.drawRect(createRect(0, 0, 200, 100), paint);

}

```

### Examples:

- [Simple](demo-snippets/vue/Simple.vue)

  - A basic example

- [Image](demo-snippets/vue/Image.vue)

  - An example drawing an image

- [Shapes](demo-snippets/vue/Shapes.vue)

  - An example drawing shapes using template

- [Animation](demo-snippets/vue/Animation.vue)

  - An example of animating a shape

- [Complex](demo-snippets/vue/Complex.vue)

  - An example of animating a shape

[](#demos-and-development)

[](#demos-and-development)

## Demos and Development

### Repo Setup

The repo uses submodules. If you did not clone with ` --recursive` then you need to call

```

git submodule update --init

```

The package manager used to install and link dependencies must be `pnpm` or `yarn`. `npm` wont work.

To develop and test:

if you use `yarn` then run `yarn`

if you use `pnpm` then run `pnpm i`

**Interactive Menu:**

To start the interactive menu, run `npm start` (or `yarn start` or `pnpm start`). This will list all of the commonly used scripts.

### Build

```bash

npm run build.all

```

WARNING: it seems `yarn build.all` wont always work (not finding binaries in `node_modules/.bin`) which is why the doc explicitly uses `npm run`

### Demos

```bash

npm run demo.[ng|react|svelte|vue].[ios|android]

npm run demo.svelte.ios # Example

```

Demo setup is a bit special in the sense that if you want to modify/add demos you dont work directly in `demo-[ng|react|svelte|vue]`

Instead you work in `demo-snippets/[ng|react|svelte|vue]`

You can start from the `install.ts` of each flavor to see how to register new demos 

[](#contributing)

[](#contributing)

## Contributing

### Update repo 

You can update the repo files quite easily

First update the submodules

```bash

npm run update

```

Then commit the changes

Then update common files

```bash

npm run sync

```

Then you can run `yarn|pnpm`, commit changed files if any

### Update readme 

```bash

npm run readme

```

### Update doc 

```bash

npm run doc

```

### Publish

The publishing is completely handled by `lerna` (you can add `-- --bump major` to force a major release)

Simply run 

```shell

npm run publish

```

### modifying submodules

The repo uses https:// for submodules which means you won't be able to push directly into the submodules.

One easy solution is t modify `~/.gitconfig` and add

```

[url "ssh://git@github.com/"]

	pushInsteadOf = https://github.com/

```

[](#questions)

[](#questions)

## Questions

If you have any questions/issues/comments please feel free to create an issue or start a conversation in the [NativeScript Community Discord](https://nativescript.org/discord).

ui-canvaslabel

@nativescript-community/ui-canvaslabel



		



	




  Alternative to the built-in NativeScript Label but uses canvas which allows extreme complexity and customization.

  






[](#table-of-contents)

[](#table-of-contents)

## Table of Contents

* [Installation](#installation)

* [Configuration](#configuration)

* [Performances](#performances)

* [TODO / Limitations](#todo--limitations)

	* [Examples:](#examples)

* [Demos and Development](#demos-and-development)

	* [Repo Setup](#repo-setup)

	* [Build](#build)

	* [Demos](#demos)

* [Contributing](#contributing)

	* [Update repo ](#update-repo-)

	* [Update readme ](#update-readme-)

	* [Update doc ](#update-doc-)

	* [Publish](#publish)

	* [modifying submodules](#modifying-submodules)

* [Questions](#questions)

A NativeScript Label widget. This widget takes a different approch from other label components. It is based on `nativescript-canvas` and allows drawing

multiple labels within one single widget.

It allows extreme complexity and customization.

[](#installation)

[](#installation)

## Installation

Run the following command from the root of your project:

`ns plugin add @nativescript-community/ui-canvaslabel`

[](#configuration)

[](#configuration)

## Configuration

It works almost like a normal label.

You can create spans, just like with the {N} labels. However there is a big difference with the {N} component.

`CSpan` do not support css class and never will! It was actually made on purpose to make to make the component much more efficient.

For now `CanvasLabel` do not auto size itself. I will add some way of doing it in the future but in a sense it defies the purpose of this component.

The `CanvasLabel` component supports most labels properties:

`color`, `fontSize`,`fontFamily`,`fontStyle`, `fontWeight`,`textAlignment`. Those can be defined through css.

Now with `CanvasLabel` you don't set the text directly. Instead you create `CSpan` or `CGroup`

Here is a complex Vue layout as an example

```html

    

        

        

    

    

        

        

        

        

        

        

    

    

        

        

    

    

```

For full example / doc look at the vue demo and the typings.

[](#performances)

[](#performances)

## Performances

`CanvasLabel` is made to be real fast. It was designed principaly to be used within list views. It uses the technique of drawing the text directly instead of using heavy native text components.

That technique is used by many apps looking for the best performances. One of the best examples is Telegram.

[](#todo--limitations)

[](#todo--limitations)

## TODO / Limitations

* For now there is no accessibility support (but it should be possible)

* The label can't size itself. I will add some ways of doing that. But possibly not in the way you are used to.

* no ellipsize support yet. Will come ([this](https://github.com/lsjwzh/FastTextView/blob/5e440575539ab1f470d853b1e7462fe0251eb869/widget.FastTextView/src/main/java/android/text/EllipsisSpannedContainer.java) could be a solution)

* a lot of canvas features can be added like shadows, gradient ...

* transform supoort should be possible at least for groups and top spans.

### Examples:

- [Basic](demo-snippets/vue/CanvasLabel.vue)

  - A basic SVG example

[](#demos-and-development)

[](#demos-and-development)

## Demos and Development

### Repo Setup

The repo uses submodules. If you did not clone with ` --recursive` then you need to call

```

git submodule update --init

```

The package manager used to install and link dependencies must be `pnpm` or `yarn`. `npm` wont work.

To develop and test:

if you use `yarn` then run `yarn`

if you use `pnpm` then run `pnpm i`

**Interactive Menu:**

To start the interactive menu, run `npm start` (or `yarn start` or `pnpm start`). This will list all of the commonly used scripts.

### Build

```bash

npm run build.all

```

WARNING: it seems `yarn build.all` wont always work (not finding binaries in `node_modules/.bin`) which is why the doc explicitly uses `npm run`

### Demos

```bash

npm run demo.[ng|react|svelte|vue].[ios|android]

npm run demo.svelte.ios # Example

```

Demo setup is a bit special in the sense that if you want to modify/add demos you dont work directly in `demo-[ng|react|svelte|vue]`

Instead you work in `demo-snippets/[ng|react|svelte|vue]`

You can start from the `install.ts` of each flavor to see how to register new demos 

[](#contributing)

[](#contributing)

## Contributing

### Update repo 

You can update the repo files quite easily

First update the submodules

```bash

npm run update

```

Then commit the changes

Then update common files

```bash

npm run sync

```

Then you can run `yarn|pnpm`, commit changed files if any

### Update readme 

```bash

npm run readme

```

### Update doc 

```bash

npm run doc

```

### Publish

The publishing is completely handled by `lerna` (you can add `-- --bump major` to force a major release)

Simply run 

```shell

npm run publish

```

### modifying submodules

The repo uses https:// for submodules which means you won't be able to push directly into the submodules.

One easy solution is t modify `~/.gitconfig` and add

```

[url "ssh://git@github.com/"]

	pushInsteadOf = https://github.com/

```

[](#questions)

[](#questions)

## Questions

If you have any questions/issues/comments please feel free to create an issue or start a conversation in the [NativeScript Community Discord](https://nativescript.org/discord).

ui-drawingcanvas

@nativescript-community/ui-drawingcanvas



		



	




  Interactive drawing canvas plugin for NativeScript – draw shapes, images and freehand paths with multiple modes, layers, undo/redo and JSON serialization.

  






[](#table-of-contents)

[](#table-of-contents)

## Table of Contents

* [Features](#features)

* [Installation](#installation)

* [Usage](#usage)

	* [NativeScript Core / TypeScript](#nativescript-core--typescript)

	* [Vue (NativeScript-Vue)](#vue-nativescript-vue)

* [Drawing Modes](#drawing-modes)

* [Undo / Redo](#undo--redo)

* [Layer Management](#layer-management)

* [JSON Serialization](#json-serialization)

* [Path Simplification](#path-simplification)

* [Custom Modes](#custom-modes)

* [Custom Shape Types](#custom-shape-types)

* [Events](#events)

	* [Examples:](#examples)

* [Demos and Development](#demos-and-development)

	* [Repo Setup](#repo-setup)

	* [Build](#build)

	* [Demos](#demos)

* [Contributing](#contributing)

	* [Update repo ](#update-repo-)

	* [Update readme ](#update-readme-)

	* [Update doc ](#update-doc-)

	* [Publish](#publish)

	* [modifying submodules](#modifying-submodules)

* [Questions](#questions)

An interactive drawing canvas plugin for NativeScript, built on top of `@nativescript-community/ui-canvas`.

[](#features)

[](#features)

## Features

- **Multiple drawing modes**: pen/freehand, rectangle, ellipse, arrow, image placement, select/transform, and move (pan)

- **Layer management**: access shapes as an ordered list of layers – reorder, remove, duplicate

- **Undo / Redo**: full history with configurable depth

- **Shape selection & transform**: resize, rotate and move any shape with on-canvas handles

- **Colour & style**: stroke colour, fill colour, stroke width and opacity per shape

- **JSON serialization**: export the entire canvas to a compact JSON string and re-import it later

- **Path simplification**: automatic Douglas-Peucker + Catmull-Rom smoothing for pen strokes (configurable, extensible)

- **Extensible**: register custom drawing modes and custom shape types

[](#installation)

[](#installation)

## Installation

Run the following command from the root of your project:

`ns plugin add @nativescript-community/ui-drawingcanvas`

[](#usage)

[](#usage)

## Usage

### NativeScript Core / TypeScript

```typescript

import { DrawingCanvas } from '@nativescript-community/ui-drawingcanvas';

const dc = new DrawingCanvas();

dc.strokeColor = new Color('red');

dc.strokeWidth = 3;

dc.setMode('pen');          // 'pen' | 'select' | 'move' | 'rectangle' | 'ellipse' | 'arrow' | 'image'

```

### Vue (NativeScript-Vue)

```typescript

// app.ts / main.ts

import DrawingCanvasPlugin from '@nativescript-community/ui-drawingcanvas/vue';

Vue.use(DrawingCanvasPlugin);

```

```html

```

[](#drawing-modes)

[](#drawing-modes)

## Drawing Modes

| Mode | Description |

|------|-------------|

| `pen` | Freehand stroke |

| `rectangle` | Tap-drag to draw a rectangle |

| `ellipse` | Tap-drag to draw an ellipse / circle |

| `arrow` | Tap-drag to draw an arrow |

| `image` | Tap to place an image (set `imageSource` on the `ImageMode` first) |

| `select` | Tap to select shapes; drag handles to resize / rotate; drag body to move |

| `move` | Pan gesture (emits `pan` event with `dx`/`dy`) |

[](#undo--redo)

[](#undo--redo)

## Undo / Redo

```typescript

dc.undo();

dc.redo();

console.log(dc.canUndo, dc.canRedo);

// Configure undo history depth (default: 50)

dc.maxUndoDepth = 30;

```

[](#layer-management)

[](#layer-management)

## Layer Management

```typescript

const layers = dc.layers;          // DrawableShape[]

dc.moveLayerUp(shape);

dc.moveLayerDown(shape);

dc.duplicateShape(shape);

dc.removeLayer(shape);

```

[](#json-serialization)

[](#json-serialization)

## JSON Serialization

```typescript

const json = dc.exportJSON();

// later …

dc.importJSON(json);

```

[](#path-simplification)

[](#path-simplification)

## Path Simplification

```typescript

dc.simplificationOptions = {

    enabled: true,

    epsilon: 2,           // Douglas-Peucker tolerance in dp

    smoothing: true,      // apply Catmull-Rom spline

    splineSegments: 8,

    splineAlpha: 0.5      // 0=uniform, 0.5=centripetal (recommended)

};

```

[](#custom-modes)

[](#custom-modes)

## Custom Modes

```typescript

import { DrawingMode } from '@nativescript-community/ui-drawingcanvas';

class MyMode extends DrawingMode {

    readonly name = 'mymode';

    onTouchEnd(point) {

        // … create and commit a shape

        this.canvas.commitShape(myShape);

    }

}

dc.registerMode(new MyMode(dc));

dc.setMode('mymode');

```

[](#custom-shape-types)

[](#custom-shape-types)

## Custom Shape Types

```typescript

import { CustomShape } from '@nativescript-community/ui-drawingcanvas';

// Register a factory so importJSON can recreate the shape

dc.registerShapeFactory('star', () => new StarShape());

```

[](#events)

[](#events)

## Events

| Event | Payload | Description |

|-------|---------|-------------|

| `shapeAdded` | `{ shape }` | Fired when a shape is committed |

| `selectionChange` | `{ shape }` | Fired when the selected shape changes in `select` mode |

| `modeChange` | `{ mode }` | Fired when the active mode changes |

| `historyChange` | `{ canUndo, canRedo }` | Fired after undo / redo stack changes |

| `pan` | `{ dx, dy }` | Fired by `move` mode on each gesture move |

### Examples:

- [Basic](demo-snippets/vue/DrawingCanvas.vue)

  - A basic Drawing example

[](#demos-and-development)

[](#demos-and-development)

## Demos and Development

### Repo Setup

The repo uses submodules. If you did not clone with ` --recursive` then you need to call

```

git submodule update --init

```

The package manager used to install and link dependencies must be `pnpm` or `yarn`. `npm` wont work.

To develop and test:

if you use `yarn` then run `yarn`

if you use `pnpm` then run `pnpm i`

**Interactive Menu:**

To start the interactive menu, run `npm start` (or `yarn start` or `pnpm start`). This will list all of the commonly used scripts.

### Build

```bash

npm run build.all

```

WARNING: it seems `yarn build.all` wont always work (not finding binaries in `node_modules/.bin`) which is why the doc explicitly uses `npm run`

### Demos

```bash

npm run demo.[ng|react|svelte|vue].[ios|android]

npm run demo.svelte.ios # Example

```

Demo setup is a bit special in the sense that if you want to modify/add demos you dont work directly in `demo-[ng|react|svelte|vue]`

Instead you work in `demo-snippets/[ng|react|svelte|vue]`

You can start from the `install.ts` of each flavor to see how to register new demos 

[](#contributing)

[](#contributing)

## Contributing

### Update repo 

You can update the repo files quite easily

First update the submodules

```bash

npm run update

```

Then commit the changes

Then update common files

```bash

npm run sync

```

Then you can run `yarn|pnpm`, commit changed files if any

### Update readme 

```bash

npm run readme

```

### Update doc 

```bash

npm run doc

```

### Publish

The publishing is completely handled by `lerna` (you can add `-- --bump major` to force a major release)

Simply run 

```shell

npm run publish

```

### modifying submodules

The repo uses https:// for submodules which means you won't be able to push directly into the submodules.

One easy solution is t modify `~/.gitconfig` and add

```

[url "ssh://git@github.com/"]

	pushInsteadOf = https://github.com/

```

[](#questions)

[](#questions)

## Questions

If you have any questions/issues/comments please feel free to create an issue or start a conversation in the [NativeScript Community Discord](https://nativescript.org/discord).

ui-svg

@nativescript-community/ui-svg



		



	




  Adds support for SVGs in your NativeScript apps.

  






[](#table-of-contents)

[](#table-of-contents)

## Table of Contents

* [Installation](#installation)

	* [NativeScript + Vue](#nativescript--vue)

	* [NativeScript + Svelte](#nativescript--svelte)

	* [Examples:](#examples)

* [Demos and Development](#demos-and-development)

	* [Repo Setup](#repo-setup)

	* [Build](#build)

	* [Demos](#demos)

* [Contributing](#contributing)

	* [Update repo ](#update-repo-)

	* [Update readme ](#update-readme-)

	* [Update doc ](#update-doc-)

	* [Publish](#publish)

	* [modifying submodules](#modifying-submodules)

* [Questions](#questions)

[](#installation)

[](#installation)

## Installation

Run the following command from the root of your project:

`ns plugin add @nativescript-community/ui-svg`

### NativeScript + Vue

```ts

import SVGPlugin from '@nativescript-community/ui-svg/vue';

Vue.use(SVGPlugin);

// or if you want the canvas version

import CanvasSVGPlugin from '@nativescript-community/ui-svg/vue/canvas';

Vue.use(CanvasSVGPlugin);

```

For other flavors you need to register the components directly:

```ts

import { SVGView } from '@nativescript-community/ui-svg';

import { CanvasSVG, SVG } from '@nativescript-community/ui-svg/canvas';

```

It works in 3 ways!.

`CanvasSVG` extending `Canvas`

```html

    

```

or `SVGView` which is a basic svg view with support for auto sizing

```html

```

Or within and Canvas View extending `CanvasView` like `CanvasLabel`

```html

 

        

        

    

    

```

### NativeScript + Svelte

```ts

// app/app.ts

import { registerNativeViewElement } from 'svelte-native/dom';

registerNativeViewElement('svgView', () => require('@nativescript-community/ui-svg').SVGView);

```

```svelte

```

### Examples:

- [Basic](demo-snippets/vue/SVG.vue)

  - A basic SVG example

[](#demos-and-development)

[](#demos-and-development)

## Demos and Development

### Repo Setup

The repo uses submodules. If you did not clone with ` --recursive` then you need to call

```

git submodule update --init

```

The package manager used to install and link dependencies must be `pnpm` or `yarn`. `npm` wont work.

To develop and test:

if you use `yarn` then run `yarn`

if you use `pnpm` then run `pnpm i`

**Interactive Menu:**

To start the interactive menu, run `npm start` (or `yarn start` or `pnpm start`). This will list all of the commonly used scripts.

### Build

```bash

npm run build.all

```

WARNING: it seems `yarn build.all` wont always work (not finding binaries in `node_modules/.bin`) which is why the doc explicitly uses `npm run`

### Demos

```bash

npm run demo.[ng|react|svelte|vue].[ios|android]

npm run demo.svelte.ios # Example

```

Demo setup is a bit special in the sense that if you want to modify/add demos you dont work directly in `demo-[ng|react|svelte|vue]`

Instead you work in `demo-snippets/[ng|react|svelte|vue]`

You can start from the `install.ts` of each flavor to see how to register new demos 

[](#contributing)

[](#contributing)

## Contributing

### Update repo 

You can update the repo files quite easily

First update the submodules

```bash

npm run update

```

Then commit the changes

Then update common files

```bash

npm run sync

```

Then you can run `yarn|pnpm`, commit changed files if any

### Update readme 

```bash

npm run readme

```

### Update doc 

```bash

npm run doc

```

### Publish

The publishing is completely handled by `lerna` (you can add `-- --bump major` to force a major release)

Simply run 

```shell

npm run publish

```

### modifying submodules

The repo uses https:// for submodules which means you won't be able to push directly into the submodules.

One easy solution is t modify `~/.gitconfig` and add

```

[url "ssh://git@github.com/"]

	pushInsteadOf = https://github.com/

```

[](#questions)

[](#questions)

## Questions

If you have any questions/issues/comments please feel free to create an issue or start a conversation in the [NativeScript Community Discord](https://nativescript.org/discord).

[](#demos-and-development)

## Demos and Development

### Repo Setup

The repo uses submodules. If you did not clone with ` --recursive` then you need to call

```

git submodule update --init

```

The package manager used to install and link dependencies must be `pnpm` or `yarn`. `npm` wont work.

To develop and test:

if you use `yarn` then run `yarn`

if you use `pnpm` then run `pnpm i`

**Interactive Menu:**

To start the interactive menu, run `npm start` (or `yarn start` or `pnpm start`). This will list all of the commonly used scripts.

### Build

```bash

npm run build.all

```

WARNING: it seems `yarn build.all` wont always work (not finding binaries in `node_modules/.bin`) which is why the doc explicitly uses `npm run`

### Demos

```bash

npm run demo.[ng|react|svelte|vue].[ios|android]

npm run demo.svelte.ios # Example

```

Demo setup is a bit special in the sense that if you want to modify/add demos you dont work directly in `demo-[ng|react|svelte|vue]`

Instead you work in `demo-snippets/[ng|react|svelte|vue]`

You can start from the `install.ts` of each flavor to see how to register new demos 

[](#contributing)

## Contributing

### Update repo 

You can update the repo files quite easily

First update the submodules

```bash

npm run update

```

Then commit the changes

Then update common files

```bash

npm run sync

```

Then you can run `yarn|pnpm`, commit changed files if any

### Update readme 

```bash

npm run readme

```

### Update doc 

```bash

npm run doc

```

### Publish

The publishing is completely handled by `lerna` (you can add `-- --bump major` to force a major release)

Simply run 

```shell

npm run publish

```

### modifying submodules

The repo uses https:// for submodules which means you won't be able to push directly into the submodules.

One easy solution is t modify `~/.gitconfig` and add

```

[url "ssh://git@github.com/"]

	pushInsteadOf = https://github.com/

```

[](#questions)

## Questions

If you have any questions/issues/comments please feel free to create an issue or start a conversation in the [NativeScript Community Discord](https://nativescript.org/discord).