diff --git a/README.md b/README.md index 8aa1e0d..592ddf4 100644 --- a/README.md +++ b/README.md @@ -7,7 +7,7 @@ | [User Guide](https://developer.playcanvas.com/user-manual/engine/web-components) | [API Reference](https://api.playcanvas.com/modules/EngineWebComponents.html) | [Examples](https://playcanvas.github.io/web-components/examples) | [Forum](https://forum.playcanvas.com/) | [Discord](https://discord.gg/RSaMRzg) | -PlayCanvas Web Components are a set of custom HTML elements for building 3D interactive web apps. Using the declarative nature of HTML makes it both easy and fun to incorporate 3D into your website. +PlayCanvas Web Components are a set of custom HTML elements for building 3D interactive web apps. Using the declarative nature of HTML makes it both easy and fun to incorporate 3D into your website. Check out this simple example: ```html @@ -32,54 +32,51 @@ PlayCanvas Web Components are a set of custom HTML elements for building 3D inte See PlayCanvas Web Components in action here: https://playcanvas.github.io/web-components/examples -## Usage 🚧 +## Usage -### Installing from NPM +Please see the [Getting Started Guide](https://developer.playcanvas.com/user-manual/engine/web-components/getting-started) for installation and usage instructions. -PlayCanvas Web Components is available as a package on [NPM](https://www.npmjs.com/package/@playcanvas/web-components). -You can install it (and the PlayCanvas Engine) as follows: +## Development -```bash -npm install playcanvas @playcanvas/web-components --save-dev -``` +### Setting Up Local Development -Next, in your HTML file, you will need an import map because the web components need to be able to find the PlayCanvas Engine (which is an external dependency): +1. Clone the repository: -```html - -``` + ```bash + git clone https://github.com/playcanvas/web-components.git + cd web-components + ``` -You can then import the components as follows: +2. Install dependencies: -```html - -``` + ```bash + npm install + ``` -You can now incorporate any of the PlayCanvas Web Components elements into your HTML! +3. Build the library in watch mode and start the development server: -### Using a CDN + ```bash + npm run dev + ``` -Instead of loading the library from a local package, you can instead opt to load it from a CDN (such as jsDelivr). In this case, you would update the import map: +4. Open http://localhost:3000/examples/ in your browser to see the examples. -```html - +### Building + +To build the library: + +```bash +npm run build ``` -And the components would now be imported as follows: +The built files will be available in the `dist` directory. -```html - +### API Documentation + +To generate API documentation: + +```bash +npm run docs ``` +The documentation will be generated in the `docs` directory. diff --git a/package.json b/package.json index 36a9419..8afce27 100644 --- a/package.json +++ b/package.json @@ -27,7 +27,7 @@ ], "scripts": { "build": "rollup -c", - "develop": "concurrently \"npm run watch\" \"npm run serve\"", + "dev": "concurrently \"npm run watch\" \"npm run serve\"", "docs": "typedoc", "lint": "eslint examples/js examples/scripts src", "serve": "serve",