This repo contains a "Holiday card" target built with Microsoft MakeCode (PXT). The editor is hosted on the GitHub pages at https://samelhusseini.github.io/pxt-holidays/controller.html
The repo serves as a demonstration to anyone trying to integrate PXT into their own application without using the PXT frontend.
Using the "editor controller" mode of PXT, you can embed PXT inside an iframe in your application and send and receive messages query project state and control PXT using a pre-defined protocol. The protocol for communicating with PXT in that mode is defined here: https://github.com/Microsoft/pxt/blob/master/pxteditor/editorcontroller.ts
This repo also contains a separate site built with React.js that demonstrates how to communicate with PXT. The site is built under /site. You would mostly likely not use this if you're trying to integrate PXT into your application.
If you'd like to start your own editor, create a copy of this repo and fix all the TODOs.
pxtarget.json
. Change the id, title, name, etc... to your taste.sim/simulator.ts
. If needed add additional JS library under sim/public/**
and edit sim/public/simulator.html
with additional script
tags.sim/api.ts
to use your runtime.pgk staticpkg --gh --bump
to upload a static version to GitHub pages.These instructions allow to run locally to modify this target.
The following commands are a 1-time setup after synching the repo on your machine.
npm install -g pxt
npm install
Once you're done, simply run this command to open a local web server:
pxt serve
Normally, you would test your page from http://localhost:3232/index.html but since the editor is in "controller" mode, we would instead test it from a page were it's embedded in an iframe, use http://localhost:3232/controller.html instead.
Follow these instructions to build and test the React site.
After making a change in the source, refresh the page in the browser.
If you would like to pick up the latest PXT build, simply run
pxt update
More instructions at https://github.com/Microsoft/pxt#running-a-target-from-localhost