NgxStackblitz

Embed StackBlitz editor. See https://stackblitz.com/docs for more details.

npm install @stackblitz/sdk ngx-stackblitz

Create New Project

files = {
 'index.html': '<h1>My Test Page</h1>',
 'index.js': 'console.log("my test")'
}

<ngx-stackblitz-editor 
    [files]="files" 
    title="My test project"
    description="Just a test"
    template="javascript"
    (changed)="saveTree($event)"></ngx-stackblitz-editor>

Editor API

Name	Description
@Input() files: {[path: string]: string};	List of files to add to the project
@Input() title: string;	Project title
@Input() description: string;	Project description
@Input() template: 'angular-cli' / 'create-react-app' / 'typescript' / 'javascript';	Type of project to create
@Input() tags?: string[];	Project tags
@Input() dependencies?: {[name: string]: string};	NPM dependencies
@Input() settings?: any;	Stackblitz Settings
@Input() openFile: string;	Path to file that should open initially
@Input() view: string;	(preview / editor) editor view
@Input() height: string;	Editor height, defaults to 100%
@Input() width: string;	Editor width, defaults to 100%
@Input() hideExplorer: boolean;	Hide the file explorer, defaults to false
@Input() hideNavigation: boolean;	Hide the editor nav, defaults to false
@Input() fileReadInterval: number;	Interval (milliseconds) to poll editor for changes, defaults to every second
@Output() changed: EventEmitter<EditorChangeEvent>	emitted every time the tree changes
@Output() loaded: EventEmitter<EditorFile[]>	emitted when the tree is loaded
@Output() created: EventEmitter<EditorFile>	emitted when a file is created
@Output() updated: EventEmitter<EditorFile>	emitted when a file is updated
@Output() deleted: EventEmitter<EditorFile>	emitted when a file is deleted

REQUIRED FILES FOR TEMPLATES

Template	Files
angular-cli	Requires index.html and main.ts to be present
create-react-app	Requires index.html and index.js to be present
typescript	Requires index.html and index.ts to be present
javascript	Requires index.html and index.js to be present

Embed GithubProject

<ngx-stackblitz-editor 
    repo="dig-platform/plugin-template" 
    (changed)="saveTree($event)"></ngx-stackblitz-editor>

Editor API

Name	Description
@Input() repo: string;	github repo path ie: dig-hub/my-plugin
@Input() openFile: string;	Path to file that should open initially
@Input() view: string;	(preview / editor) editor view
@Input() height: string;	Editor height, defaults to 100%
@Input() width: string;	Editor width, defaults to 100%
@Input() hideExplorer: boolean;	Hide the file explorer, defaults to false
@Input() hideNavigation: boolean;	Hide the editor nav, defaults to false
@Input() fileReadInterval: number;	Interval (milliseconds) to poll editor for changes, defaults to every second
@Output() changed: EventEmitter<EditorChangeEvent>	emitted every time the tree changes
@Output() loaded: EventEmitter<EditorFile[]>	emitted when the tree is loaded
@Output() created: EventEmitter<EditorFile>	emitted when a file is created
@Output() updated: EventEmitter<EditorFile>	emitted when a file is updated
@Output() deleted: EventEmitter<EditorFile>	emitted when a file is deleted

Embed Existing Project

<ngx-stackblitz-editor 
    projectID="my-project" 
    (changed)="saveTree($event)"></ngx-stackblitz-editor>

Open existing project

Name	Description
@Input() projectID: string;	Stackblitz project ID
@Input() openFile: string;	Path to file that should open initially
@Input() view: string;	(preview / editor) editor view
@Input() height: string;	Editor height, defaults to 100%
@Input() width: string;	Editor width, defaults to 100%
@Input() hideExplorer: boolean;	Hide the file explorer, defaults to false
@Input() hideNavigation: boolean;	Hide the editor nav, defaults to false
@Input() fileReadInterval: number;	Interval (milliseconds) to poll editor for changes, defaults to every second
@Output() changed: EventEmitter<EditorChangeEvent>	emitted every time the tree changes
@Output() loaded: EventEmitter<EditorFile[]>	emitted when the tree is loaded
@Output() created: EventEmitter<EditorFile>	emitted when a file is created
@Output() updated: EventEmitter<EditorFile>	emitted when a file is updated
@Output() deleted: EventEmitter<EditorFile>	emitted when a file is deleted

Interfaces

export interface EditorFile {
  path: string;
  content: string;
  status?: string;
}

export interface EditorChangeEvent {
  tree: EditorFile[];
  created?: EditorFile[];
  updated?: EditorFile[];
  deleted?: EditorFile[];
}