add docs

package.json

@@ -16,6 +16,7 @@
     "start": "npm run --ws start --if-present",
     "start:local": "npm run start --workspace @devtool/local --if-present",
     "start:chrome": "npm run start --workspace @devtool/chrome & npm run start --workspace @devtool/example",
+    "start:docs": "npm run start --workspace @devtool/docs",
     "prebuild": "npm run clean",
     "build": "npm run --ws build --if-present",
     "postbuild": "mkdir -p .upload && cd ./packages/devtool-chrome && zip -r chrome.zip ./dist/chrome/* && mv chrome.zip ../../.upload/",

packages/docs/.gitignore

@@ -0,0 +1,20 @@
+# Dependencies
+/node_modules
+
+# Production
+/build
+
+# Generated files
+.docusaurus
+.cache-loader
+
+# Misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

packages/docs/README.md

@@ -0,0 +1,41 @@
+# Website
+
+This website is built using [Docusaurus](https://docusaurus.io/), a modern static website generator.
+
+### Installation
+
+```
+$ yarn
+```
+
+### Local Development
+
+```
+$ yarn start
+```
+
+This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.
+
+### Build
+
+```
+$ yarn build
+```
+
+This command generates static content into the `build` directory and can be served using any static contents hosting service.
+
+### Deployment
+
+Using SSH:
+
+```
+$ USE_SSH=true yarn deploy
+```
+
+Not using SSH:
+
+```
+$ GIT_USER=<Your GitHub username> yarn deploy
+```
+
+If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch.

packages/docs/babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
+};

packages/docs/docs/guide/faq.md

@@ -0,0 +1,64 @@
+---
+sidebar_position: 3
+---
+
+# F.A.Q
+
+## The PixiJS Devtools don't show up
+
+Here are some troubleshooting steps to help you if you don't the PixiJS devtools in your browser:
+
+* Check if the extension is installed and enabled:
+
+  Open the Chrome extensions page by typing `chrome://extensions` in the address bar. Make sure the PixiJS Devtools extension is installed and enabled.
+  If it's not installed, please read the [installation guide](/docs/guide/installation).
+
+* Try closing the devtools pane, refreshing the page and opening the devtools pane again**.
+* Try restarting the browser or the computer.
+* If you have multiple pages with the PixiJS Devtools open, try closing all of them and opening a new one.
+* If you have multiple versions of the devtools installed, it's recommended to disable/remove the others. n
+* Look for errors in the browser Console.
+
+  If you see any errors, please report them in the [GitHub issues](https://github.com/pixijs/devtools/issues).
+
+---
+
+## Scene isn't updating in the Devtools
+
+If the scene isn't updating in the devtools, try the following steps:
+
+* Close the devtools pane.
+* Refresh the page.
+* Open the devtools pane again.
+
+If the scene still isn't updating, try looking for errors in the console:
+
+* Open the browser console, you can do this by pressing `ESC`
+* Look for errors in the devtools Console.
+  You can open the devtools console by right-clicking on the devtools pane and selecting "Inspect".
+
+  <!-- add collapisble section -->
+  <details>
+    <summary>How to open the devtools console</summary>
+    <img src="/devtools/gif/devtool-right-click.gif" alt="Right click on the devtools pane and select Inspect" />
+  </details>
+  <!-- add right click gif -->
+  <!-- <img src="/devtools/gif/devtool-right-click.gif" alt="Right click on the devtools pane and select Inspect" /> -->
+
+If you see any errors, please report them in the [GitHub issues](https://github.com/pixijs/devtools/issues).
+
+---
+
+## Property is not displayed
+
+If a property is not displayed in the devtools, it might be because the property is not set on the object.
+
+For example, the `filterArea` property is not displayed in the devtool until it's set on the object in your code.
+To get the property to display, you can set it on the object like this:
+
+```js
+const sprite = new Sprite(texture);
+sprite.filterArea = new Rectangle(0, 0, 100, 100);
+```
+
+If you think a property should be displayed, please report it in the [GitHub issues](https://github.com/pixijs/devtools/issues).

packages/docs/docs/guide/features.mdx

@@ -0,0 +1,135 @@
+---
+sidebar_position: 2
+title: Features
+---
+
+import React from 'react';
+import { useColorMode } from '@docusaurus/theme-common';
+
+export const Gif = ({ src, alt }) => {
+  return (
+    <div style={{ display: 'flex', justifyContent: 'center', padding: '2rem 4rem', paddingTop: '1rem' }}>
+      <img src={src} alt={alt} style={{ maxWidth: '100%', borderRadius: '0.5rem', border: '1px solid #676767' }} />
+    </div>
+  );
+};
+
+# Features
+
+## Editing PixiJS Objects
+
+The PixiJS Devtools allows you to edit the properties of PixiJS objects in real-time.
+
+You can change the properties of a PixiJS object and see the changes reflected in the scene immediately.
+This includes properties such as position, scale, rotation, and more.
+
+<Gif src="/devtools/gif/devtool-properties.gif" alt="Editing PixiJS objects in the PixiJS Devtools" />
+
+:::info
+By default pixi properties that do not exist on the object are not shown.
+
+For example `filterArea` is not shown in the devtools until it's set on the object in your code.
+
+```js
+const sprite = new Sprite(texture);
+sprite.filterArea = new Rectangle(0, 0, 100, 100);
+```
+
+:::
+
+### Searching for PixiJS Objects
+
+The search feature in the PixiJS Devtools allows you to search for specific PixiJS objects in the scene by their name or other properties,
+making it easier to locate and edit objects in complex scenes.
+
+<Gif src="/devtools/gif/devtool-search.gif" alt="Searching for PixiJS objects in the PixiJS Devtools" />
+
+---
+
+## Overlay Highlight
+
+The overlay feature in the PixiJS Devtools allows you to highlight the bounds of a PixiJS object in the scene.
+This is useful for debugging layout and alignment issues.
+
+<Gif src="/devtools/gif/devtool-highlight.gif" alt="Highlight overlay for the PixiJS Devtools" />
+
+---
+
+## Selection
+
+The selection feature in the PixiJS Devtools allows you to select specific PixiJS objects in the scene, enabling focused editing and inspection.
+
+<Gif src="/devtools/gif/devtool-selection.gif" alt="Selecting nodes in the PixiJS Devtools" />
+
+---
+
+## Stats
+
+The stats feature in the PixiJS Devtools allows you to view the total number of PixiJS objects in the scene.
+This can help you identify performance issues and optimize your application.
+
+<Gif src="/devtools/gif/devtool-stats.gif" alt="Viewing stats in the PixiJS Devtools" />
+
+---
+
+## Rename Nodes
+
+The rename nodes feature in the PixiJS Devtools allows you to rename specific PixiJS objects in the scene,
+which is particularly useful for organizing and managing your scene graph.
+
+<Gif src="/devtools/gif/devtool-rename.gif" alt="Renaming nodes in the PixiJS Devtools" />
+
+---
+
+## Deleting Nodes
+
+The delete nodes feature in the PixiJS Devtools allows you to delete specific PixiJS objects from the scene, helping you to manage debug your scene graph.
+
+<Gif src="/devtools/gif/devtool-delete.gif" alt="Deleting nodes in the PixiJS Devtools" />
+
+---
+
+## Reparenting Nodes
+
+The reparent nodes feature in the PixiJS Devtools allows you to move your PixiJS objects around the scene.
+This can be useful for debugging layout issues.
+
+<Gif src="/devtools/gif/devtool-reparent.gif" alt="Reparenting nodes in the PixiJS Devtools" />
+
+---
+
+## Locking Nodes
+
+The lock nodes feature in the PixiJS Devtools allows you to lock specific PixiJS objects in the scene.
+
+This means that the node can no longer by edited, moved, deleted, or selected using the selection tool.
+
+<Gif src="/devtools/gif/devtool-lock.gif" alt="Locking nodes in the PixiJS Devtools" />
+
+---
+
+## Copying Properties
+
+The copy properties feature in the PixiJS Devtools allows you to copy specific properties of a PixiJS object and paste them back into your code, saving you time and effort.
+
+<Gif src="/devtools/gif/devtool-copy.gif" alt="Copying properties in the PixiJS Devtools" />
+
+---
+
+## Ignoring Nodes
+
+The ignore nodes feature in the PixiJS Devtools allows you to hide specific PixiJS objects in the scene.
+This can be useful when you have a large number of objects in the scene and you are seeing performance issues with the devtools.
+
+You have the option to ignore a node and its children, or just its children.
+
+```js
+// Example of ignoring a node
+const manyChildren = new Container();
+manyChildren.__devtoolsIgnore = true;
+manyChildren.__devtoolsIgnoreChildren = true;
+```
+
+:::info
+Installing `@pixi/devtools` will automatically add the `__devtoolsIgnore` and `__devtoolsIgnoreChildren` types
+:::