Record · corpus.blog/posts/01a0874e-6722-716f-9d97-facd9940e998

Let's Make an Interactive Coding Tutorial

livecodes.io · published 4 August 2023

A record is what was published and who pointed at it. The text of the post is not held here: read it at the source, or at its Wayback capture.

Read the post at livecodes.io Wayback capture

0blogs citing

First cited: —
Most recent: —
Rank this month: not ranked
Links from this post: 18
Words captured: 19,503

Cited by

No blog we hold has cited this post yet.

Links from this post

Link

Host

Introducing LiveCodes 🎉 Read at the source ↗

livecodes.io

https://livecodes.io/docs/sdk/js-ts

livecodes.io

https://livecodes.io/docs/sdk/react

livecodes.io

https://livecodes.io/docs/sdk/vue

livecodes.io

https://livecodes.io/docs/sdk/svelte

livecodes.io

https://livecodes.io/?mode=result&html=%3Cdiv+id%3D%22container%22%3E%3C%2Fdiv%3E%0A%0A%3Cscript+type%3D%22module%22%3E%0A++import+%7B+createPlayground+%7D+from+%27https%3A%2F%2Funpkg.com%2Flivecodes%27%3B%0A%0A++createPlayground%28%27%23container%27%2C+%7B+%2F*+embed+options+*%2F+%7D%29%3B%0A%3C%2Fscript%3E%0A&css=body+%7B+margin%3A+50px+2em%3B+%7D

livecodes.io

https://livecodes.io/docs/features/permanent-url

livecodes.io

https://livecodes.io/?mode=result&html=%3Cdiv+id%3D%22container%22%3E%3C%2Fdiv%3E%0A%0A%3Cscript+type%3D%22module%22%3E%0A++%2F%2F+highlight-next-line%0A++import+%7B+createPlayground+%7D+from+%27https%3A%2F%2Funpkg.com%2Flivecodes%400.9.0%27%3B%0A%0A++const+options+%3D+%7B%0A++++%2F%2F+highlight-next-line%0A++++appUrl%3A+%27https%3A%2F%2Fv43.livecodes.io%27%2C%0A++%7D%3B%0A++createPlayground%28%27%23container%27%2C+options%29%3B%0A%3C%2Fscript%3E%0A&css=body+%7B+margin%3A+50px+2em%3B+%7D

livecodes.io

https://livecodes.io/?mode=result&html=%3Cdiv+id%3D%22container%22%3E%3C%2Fdiv%3E%0A%0A%3Cscript+type%3D%22module%22%3E%0A++import+%7B+createPlayground+%7D+from+%27https%3A%2F%2Funpkg.com%2Flivecodes%400.9.0%27%3B%0A%0A++const+options+%3D+%7B%0A++++appUrl%3A+%27https%3A%2F%2Fv43.livecodes.io%27%2C%0A++++%2F%2F+highlight-start%0A++++config%3A+%7B%0A++++++markup%3A+%7B%0A++++++++language%3A+%27html%27%2C%0A++++++++content%3A+%27Welcome+to+the+tutorial%21%27%2C%0A++++++%7D%2C%0A++++%7D%2C%0A++++%2F%2F+highlight-end%0A++%7D%3B%0A++createPlayground%28%27%23container%27%2C+options%29%3B%0A%3C%2Fscript%3E%0A&css=body+%7B+margin%3A+50px+2em%3B+%7D

livecodes.io

https://livecodes.io/docs/sdk/js-ts/

livecodes.io

https://livecodes.io/?mode=result&html=%3Cdiv+id%3D%22container%22%3E%3C%2Fdiv%3E%0A%3C%21--+highlight-next-line+--%3E%0A%3Cbutton+id%3D%22next%22%3ENext%3C%2Fbutton%3E%0A%0A%3Cscript+type%3D%22module%22%3E%0A++import+%7B+createPlayground+%7D+from+%22https%3A%2F%2Funpkg.com%2Flivecodes%400.9.0%22%3B%0A%0A++%2F%2F+highlight-start%0A++const+steps+%3D+%5B%0A++++%7B%0A++++++config%3A+%7B%0A++++++++markup%3A+%7B%0A++++++++++language%3A+%22html%22%2C%0A++++++++++content%3A+%27%3Ch1%3EHello%2C%5Cn++%3Cspan+id%3D%22title%22%3EWorld%3C%2Fspan%3E%21%5Cn%3C%2Fh1%3E%27%2C%0A++++++++%7D%2C%0A++++++%7D%2C%0A++++%7D%2C%0A++%5D%3B%0A++%2F%2F+highlight-end%0A%0A++const+options+%3D+%7B%0A++++appUrl%3A+%22https%3A%2F%2Fv43.livecodes.io%22%2C%0A++++config%3A+%7B%0A++++++markup%3A+%7B%0A++++++++language%3A+%22html%22%2C%0A++++++++content%3A+%22Welcome+to+the+tutorial%21%22%2C%0A++++++%7D%2C%0A++++%7D%2C%0A++%7D%3B%0A%0A++%2F%2F+highlight-start%0A++createPlayground%28%22%23container%22%2C+options%29.then%28%28playground%29+%3D%3E+%7B%0A++++const+nextBtn+%3D+document.querySelector%28%22%23next%22%29%3B%0A++++nextBtn.addEventListener%28%22click%22%2C+async+%28%29+%3D%3E+%7B%0A++++++const+currentStep+%3D+steps%5B0%5D%3B%0A++++++await+playground.setConfig%28currentStep.config%29%3B%0A++++%7D%29%3B%0A++%7D%29%3B%0A++%2F%2F+highlight-end%0A%3C%2Fscript%3E%0A&css=body+%7B+margin%3A+50px+2em%3B+%7D

livecodes.io

https://livecodes.io/docs/configuration/configuration-object

livecodes.io

https://livecodes.io/?mode=result&html=%3Cdiv+id%3D%22container%22%3E%3C%2Fdiv%3E%0A%3Cbutton+id%3D%22next%22%3ENext%3C%2Fbutton%3E%0A%0A%3Cscript+type%3D%22module%22%3E%0A++import+%7B+createPlayground+%7D+from+%22https%3A%2F%2Funpkg.com%2Flivecodes%400.9.0%22%3B%0A%0A++const+steps+%3D+%5B%0A++++%7B%0A++++++config%3A+%7B%0A++++++++markup%3A+%7B%0A++++++++++language%3A+%22html%22%2C%0A++++++++++content%3A+%27%3Ch1%3EHello%2C%5Cn++%3Cspan+id%3D%22title%22%3EWorld%3C%2Fspan%3E%21%5Cn%3C%2Fh1%3E%27%2C%0A++++++++%7D%2C%0A++++++%7D%2C%0A++++%7D%2C%0A++++%2F%2F+highlight-start%0A++++%7B%0A++++++config%3A+%7B%0A++++++++markup%3A+%7B%0A++++++++++language%3A+%22html%22%2C%0A++++++++++content%3A+%27%3Ch1%3EHello%2C%5Cn++%3Cspan+id%3D%22title%22%3EWorld%3C%2Fspan%3E%21%5Cn%3C%2Fh1%3E%27%2C%0A++++++++%7D%2C%0A++++++++style%3A+%7B%0A++++++++++language%3A+%27css%27%2C%0A++++++++++content%3A+%27%23title+%7B%5Cn++color%3A+blue%3B%5Cn%7D%27%2C%0A++++++++%7D%2C%0A++++++%7D%2C%0A++++%7D%2C++++%0A++++%2F%2F+highlight-end%0A++%5D%3B%0A%0A++const+options+%3D+%7B%0A++++appUrl%3A+%22https%3A%2F%2Fv43.livecodes.io%22%2C%0A++++config%3A+%7B%0A++++++markup%3A+%7B%0A++++++++language%3A+%22html%22%2C%0A++++++++content%3A+%22Welcome+to+the+tutorial%21%22%2C%0A++++++%7D%2C%0A++++%7D%2C%0A++%7D%3B%0A%0A++createPlayground%28%22%23container%22%2C+options%29.then%28%28playground%29+%3D%3E+%7B%0A++++%2F%2F+highlight-next-line%0A++++let+step+%3D+0%3B%0A++++const+nextBtn+%3D+document.querySelector%28%22%23next%22%29%3B%0A++++nextBtn.addEventListener%28%22click%22%2C+async+%28%29+%3D%3E+%7B%0A++++++%2F%2F+highlight-start%0A++++++const+lastStep+%3D+steps.length+-+1%3B%0A++++++const+currentStep+%3D+steps%5Bstep%5D%3B%0A++++++await+playground.setConfig%28currentStep.config%29%3B%0A++++++step+%3D+step+%3C+lastStep+%3F+step+%2B+1+%3A+0%3B%0A++++++%2F%2F+highlight-end%0A++++%7D%29%3B%0A++%7D%29%3B%0A%3C%2Fscript%3E%0A&css=body+%7B+margin%3A+50px+2em%3B+%7D

livecodes.io

https://livecodes.io/?mode=result&html=%3Cdiv+id%3D%22container%22%3E%3C%2Fdiv%3E%0A%3Cbutton+id%3D%22next%22%3ENext%3C%2Fbutton%3E%0A%0A%3Cscript+type%3D%22module%22%3E%0A++import+%7B+createPlayground+%7D+from+%22https%3A%2F%2Funpkg.com%2Flivecodes%400.9.0%22%3B%0A%0A++const+steps+%3D+%5B%0A++++%7B%0A++++++config%3A+%7B%0A++++++++markup%3A+%7B%0A++++++++++language%3A+%22html%22%2C%0A++++++++++content%3A+%27%3Ch1%3EHello%2C%5Cn++%3Cspan+id%3D%22title%22%3EWorld%3C%2Fspan%3E%21%5Cn%3C%2Fh1%3E%27%2C%0A++++++++%7D%2C%0A++++++%7D%2C%0A++++%7D%2C%0A++++%7B%0A++++++%2F%2F+highlight-start%0A++++++config%3A+%7B%0A++++++++style%3A+%7B%0A++++++++++language%3A+%27css%27%2C%0A++++++++++content%3A+%27%23title+%7B%5Cn++color%3A+blue%3B%5Cn%7D%27%2C%0A++++++++%7D%2C%0A++++++%7D%2C%0A++++++%2F%2F+highlight-end%0A++++%7D%2C++++%0A++%5D%3B%0A%0A++const+options+%3D+%7B%0A++++appUrl%3A+%22https%3A%2F%2Fv43.livecodes.io%22%2C%0A++++config%3A+%7B%0A++++++markup%3A+%7B%0A++++++++language%3A+%22html%22%2C%0A++++++++content%3A+%22Welcome+to+the+tutorial%21%22%2C%0A++++++%7D%2C%0A++++%7D%2C%0A++%7D%3B%0A%0A++createPlayground%28%22%23container%22%2C+options%29.then%28%28playground%29+%3D%3E+%7B%0A++++let+step+%3D+0%3B%0A++++const+nextBtn+%3D+document.querySelector%28%22%23next%22%29%3B%0A++++nextBtn.addEventListener%28%22click%22%2C+async+%28%29+%3D%3E+%7B%0A++++++const+lastStep+%3D+steps.length+-+1%3B%0A++++++const+currentStep+%3D+steps%5Bstep%5D%3B%0A++++++%2F%2F+highlight-start%0A++++++const+prevConfig+%3D+step+%3D%3D%3D+0+%3F+options.config+%3A+await+playground.getConfig%28%29%3B%0A++++++await+playground.setConfig%28%7B+...prevConfig%2C+...currentStep.config+%7D%29%3B%0A++++++%2F%2F+highlight-end%0A++++++step+%3D+step+%3C+lastStep+%3F+step+%2B+1+%3A+0%3B%0A++++%7D%29%3B%0A++%7D%29%3B%0A%3C%2Fscript%3E%0A&css=body+%7B+margin%3A+50px+2em%3B+%7D

livecodes.io

https://livecodes.io/docs/features/intellisense

livecodes.io

https://github.com/live-codes/livecodes/discussions

github.com

https://livecodes.io/docs/contact

livecodes.io

https://livecodes.io/docs/sponsor

livecodes.io