diff --git a/docs/index.md b/docs/index.md index 86aca2cc..504dd2b1 100644 --- a/docs/index.md +++ b/docs/index.md @@ -85,6 +85,11 @@ m.render(root, "My first app") As you can see, you use the same code to both create and update HTML. Mithril automatically figures out the most efficient way of updating the text, rather than blindly recreating it from scratch. +#### Live Example + +

See the Pen Mithril Hello World by Pat Cavit (@tivac) on CodePen.

+ + --- ### DOM elements @@ -119,6 +124,11 @@ m("main", [ ]) ``` +#### Live Example + +

See the Pen Simple Mithril Example by Pat Cavit (@tivac) on CodePen.

+ + Note: If you prefer `` syntax, [it's possible to use it via a Babel plugin](jsx.md). ```jsx @@ -185,6 +195,11 @@ You can now update the label of the button by clicking the button. Since we used If you're wondering about performance, it turns out Mithril is very fast at rendering updates, because it only touches the parts of the DOM it absolutely needs to. So in our example above, when you click the button, the text in it is the only part of the DOM Mithril actually updates. +#### Live Example + +

See the Pen Mithril Component Example by Pat Cavit (@tivac) on CodePen.

+ + --- ### Routing @@ -218,6 +233,11 @@ The `"/splash"` right after `root` means that's the default route, i.e. if the h Also, as you would expect, clicking on the link on the splash page takes you to the click counter screen we created earlier. Notice that now your URL will point to `http://localhost/#!/hello`. You can navigate back and forth to the splash page using the browser's back and next button. +#### Live Example + +

See the Pen Mithril Routing Example by Pat Cavit (@tivac) on CodePen.

+ + --- ### XHR @@ -260,6 +280,11 @@ var Hello = { Clicking the button should now update the count. +#### Live Example + +

See the Pen Mithril XHR Example by Pat Cavit (@tivac) on CodePen.

+ + --- We covered how to create and update HTML, how to create components, routes for a Single Page Application, and interacted with a server via XHR.