diff --git a/src/components/RequiredStar.astro b/src/components/RequiredStar.astro
new file mode 100644
index 0000000..7e8e817
--- /dev/null
+++ b/src/components/RequiredStar.astro
@@ -0,0 +1,16 @@
+---
+export interface Props {
+ title?: string;
+ name?: string;
+}
+
+const { title = `This ${Astro.props.name || "option"} is required.` } = Astro.props;
+---
+
+*
+
+
diff --git a/src/content/docs/creating-plugins/index.md b/src/content/docs/creating-plugins/index.md
deleted file mode 100644
index df5ac47..0000000
--- a/src/content/docs/creating-plugins/index.md
+++ /dev/null
@@ -1,4 +0,0 @@
----
-title: Creating plugins
-description: How to create plugins for Vencord
----
diff --git a/src/content/docs/creating-plugins/index.mdx b/src/content/docs/creating-plugins/index.mdx
new file mode 100644
index 0000000..bf0f97e
--- /dev/null
+++ b/src/content/docs/creating-plugins/index.mdx
@@ -0,0 +1,140 @@
+---
+title: Creating Plugins
+description: How to create plugins for Vencord
+---
+
+import { Aside, Tabs, TabItem, Code } from '@astrojs/starlight/components';
+import RequiredStar from "@vencord-docs/components/RequiredStar.astro"
+
+## Prerequisites
+
+- A [development Vencord install](../installing/index.mdx)
+- VSCode with the extensions recommended by Vencord
+
+Other knowledge requirements include:
+
+- JavaScript/TypeScript knowledge
+- Basic regex knowledge
+- Basic knowledge of the command line
+- Basic knowledge of how to use chrome devtools
+- The ability to understand code from just reading it, without requiring documentation
+- Basic react knowledge (if you want to do anything with ui)
+
+## Plugin Setup
+
+First, decide whether you want to use the `src/plugins` or `src/userplugins` folder.
+
+### Official Plugins vs UserPlugins
+
+
+
+ Plugins inside `src/plugins` are tracked via git and are included in the official Vencord releases.
+
+ Use this location if you intend to [submit your plugin for inclusion in Vencord](./submission).
+
+
+ Plugins inside `src/userplugins` are private. They are not tracked via git.
+
+ Use this location if you don't intend to submit your plugin for inclusion in Vencord.
+
+
+
+___
+
+Once you have decided, create a folder with the name of your plugin inside the chosen directory.
+
+The folder's name should be in camelCase. For example `myFirstPlugin` (NOT `MyFirstPlugin` or `my first plugin`)
+
+### Plugin Structure
+
+There are 3 special files you can create here:
+- `index.ts` / `index.tsx`: Your plugin's entry point.
+- `README.md`: Markdown documentation for your plugin. This file
+ should contain a description of your plugin and instructions how to use it.
+ Screenshots, videos or gifs are highly recommended.
+ This will be used to generate a custom webpage for your plugin at https://vencord.dev/plugins/YourPlugin.
+- `native.ts`: Your plugin's native entry point. This code will run inside NodeJS instead of the browser.
+ If you need to run code on the system, for example to read/write files, you can do so via this file.
+
+### Plugin Boilerplate
+
+Start creating your plugin by adding an `index.ts` file inside your plugin's folder.
+
+Type `vcPlugin` in the file, and you should automatically be suggested the "Define Plugin" template.
+
+:::note
+If this doesn't work for you, follow the [editor setup guide](../installing/editor-setup#installing-the-recommended-extensions)
+to install the Vencord Companion extension.
+:::
+
+Now that you've done this, the file should look like this:
+
+```ts
+import { Devs } from "@utils/constants";
+import definePlugin from "@utils/types";
+
+export default definePlugin({
+ name: "name",
+ description: "description",
+ authors: [Devs.author],
+});
+```
+
+Fill out the `name` and `description` fields in the `definePlugin` call.
+
+```ts "MyCoolPlugin" "I am very cute!"
+export default definePlugin({
+ name: "MyCoolPlugin",
+ description: "I am very cute!",
+ authors: [Devs.author],
+});
+```
+
+For the authors property, how you do this will depend on whether you're making a plugin or a userplugin.
+
+
+
+ If this is your first time contributing, you will first have to add yourself to the `Devs` object.
+ It should already be imported, so just jump to its definition and add yourself to the obejct.
+ Now, set authors to the new property!
+ ```ts ins="Devs.author"
+ export default definePlugin({
+ name: "MyCoolPlugin",
+ description: "I am very cute!",
+ authors: [Devs.author],
+ });
+ ```
+
+
+ Just set it to a plain object with your info:
+ ```ts ins="{ name: \"Your Name\", id: 1234567890n }"
+ export default definePlugin({
+ name: "MyCoolPlugin",
+ description: "I am very cute!",
+ authors: [{ name: "Your Name", id: 1234567890n }],
+ });
+ ```
+
+
+
+___
+
+Save your file and it should automatically format it and insert the following license header on the top.
+
+