Public
Edited
Feb 4, 2023
Paused
2 stars
// https://unpkg.com/@stackblitz/sdk@1.8.0/bundles/sdk.umd.js
stackblitz = require("https://unpkg.com/@stackblitz/sdk/bundles/sdk.umd.js")
embedOptions = ({
// openFile?: string | string[]; // Show one or multiple files on embed load
// clickToLoad?: boolean; // Load editor only when clicked ("click to load")
//view: "preview", // view?: 'preview' | 'editor';
height: 400, // height?: number | string;
width: "100%", // width?: number | string;
hideExplorer: false, // hideExplorer?: boolean;
hideNavigation: false, // hideNavigation?: boolean;
forceEmbedLayout: false // forceEmbedLayout?: boolean; // Disables the full stackblitz UI on larger screen sizes
// initialPath?: string; // The initial URL path the preview should open
// origin?: string; // Set the origin URL of your StackBlitz EE server
})
projectPayload = ({
files: {
// files: {[path: string]: string};
"index.js": `${(menuButton) => {
menuButton.addEventListener("click", function () {
let classList = document.getElementById("nav").classList;
classList.toggle("hidden");
classList.toggle("block");
});
}}`,
"input.css": `@tailwind base; @tailwind components; @tailwind utilities;`,
"package.json": JSON.stringify({
scripts: {
start: "npx tailwindcss -i ./input.css -o ./output.css --minify"
},
dependencies: { tailwindcss: "^3.1.6" }
}),
"tailwind.config.js": `${(module) => {
module.exports = {
content: ["./index.js"],
theme: {
extend: {}
},
plugins: []
};
}}`
},
// title: "notebook",
// description: string;
template: "node" // template: 'angular-cli' | 'create-react-app' | 'html' | 'javascript' | 'polymer' | 'typescript' | 'vue' | 'node';
// dependencies?: {[name: string]: string};
// settings?: {
// compile?: {
// trigger?: 'auto' | 'keystroke' | 'save';
// action?: 'hmr' | 'refresh';
// clearConsole?: boolean;
// };
// };
})
// while [true]; do echo "Welcome"; done
viewof project = {
const element = html`<div>`;
yield element;
const project = await stackblitz.embedProject(
element,
projectPayload,
embedOptions
);
element.value = project;
element.dispatchEvent(new Event("input", { bubbles: true }));
}
project.applyFsDiff({
create: {
["index.js"]: `"testing123";` // path=>contents of files to create
},
destroy: [] // Paths of files to delete
})
editor = project.editor
project.getDependencies()
files = project.getFsSnapshot()
html`<style>${files["output.css"]}`
project.getDependencies()
project.preview.getUrl()
html = htl.html
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
