diff --git a/docs/demos/hello.jsx b/docs/demos/hello.jsx index d8aaa16..0d52d68 100644 --- a/docs/demos/hello.jsx +++ b/docs/demos/hello.jsx @@ -1,81 +1,51 @@ +--- +title: Compositor Iso Demo +--- - - Hello - - - Welcome to Iso, a prototyping environment for Lab UI components. - - - - - - - - Lab Sync - - - Compositor Iso syncs with Lab to show real-time updates to components and design system constants and themes. - - - - - Zero Setup - - - Prototype and build pages without the need to open up terminal or spend any time setting up development servers. - - - - - Export HTML - - - Use Iso to quickly build prototypes or static HTML pages using components built with Lab. - - - - - One-Click Publishing - - - Quickly share ideas with your team using the built-in publishing service. - - - - + + Hello + + + Welcome to Iso, a prototyping environment for Lab UI components. + + + + + + + + Lab Sync + + + Iso syncs with Lab to show real-time updates to components and themes. + + + + + Zero Setup + + + Prototype and build pages without the need to open up terminal or spend any time setting up development servers. + + + + + Export HTML + + + Use Iso to quickly build prototypes or static HTML pages using components built with Lab. + + + + + One-Click Publishing + + + Quickly share ideas with your team using the built-in publishing service. + + + + \ No newline at end of file diff --git a/docs/getting-started.md b/docs/getting-started.md index a8c2c24..bb01005 100644 --- a/docs/getting-started.md +++ b/docs/getting-started.md @@ -1,10 +1,9 @@ # Getting Started -Iso is an isolated prototyping environment and page builder for Lab UI components, -which lets you preview Lab components in real time using a simplified [JSX][jsx] code editor. -Iso allows you to build full pages and prototypes without -any development environment setup. +Iso is an isolated prototyping environment and page builder for Lab UI components. +Preview edits to Lab components in real time using a simplified [JSX][jsx] code editor. +Build, design, and publish pages without needing to setup a development environment. When opening Iso for the first time, you'll see the `getting-started.jsx` example file. @@ -14,18 +13,22 @@ Each Iso file acts like a component and can be exported as static HTML. ## User Interface -The main area on the left of Iso's window is a live preview of the currently opened file. +The main area on the left of Iso's window is a live preview of the current file. To the right is the editor pane, which shows the JSX source code by default. + Clicking on the props button in the upper right shows the YAML-based props editor, where page-level props can be defined. + Clicking on the folder icon shows the current folder and allows you to open Iso-compatible files. + The Lab button opens the Compositor Lab app when the current folder includes a Lab project. -The HTTP button starts a local Preview server and opens the current page in the default browser. +The HTTP button starts a local Preview server on port 8000 and opens the current page in the default browser + The title bar includes the path and file name for the currently opened file. Clicking on any part of the path will navigate to that folder. @@ -105,6 +108,18 @@ Changes made in the Lab app will automatically be applied to an open Iso file. Lab components with the same name as an Iso primitive will override the defaults. This is useful for custom Heading and Link styles. +### Previewing on External Devices + +To preview this page from an external device, first navigate to System Preferences > Network to find your IP address. + + + +On an external device enter in the IP address followed by :8000 +``` +http://169.254.163.132:8000 +``` +The external device must be on the same wifi network as your computer. + [jsx]: https://reactjs.org/docs/introducing-jsx.html [yaml]: http://yaml.org diff --git a/docs/index.md b/docs/index.md index 6933e5d..589015a 100644 --- a/docs/index.md +++ b/docs/index.md @@ -2,6 +2,7 @@ # Compositor Iso Build pages and prototypes with Lab UI components. No configuration or build setup required. +One-click page publishing. - [Installation](installation.md) - [Getting Started](getting-started.md)