update vanilla javascript docs and remove cdn page for redundancy

next.config.mjs

@@ -62,6 +62,11 @@ const nextConfig = {
         destination: '/editor/getting-started/install',
         permanent: true,
       },
+      {
+        source: '/editor/getting-started/install/cdn',
+        destination: '/editor/getting-started/install/vanilla-javascript',
+        permanent: true,
+      },
       {
         source: '/editor/markdown/getting-started',
         destination: '/editor/markdown/getting-started/installation',

src/content/editor/getting-started/install/vanilla-javascript.mdx

@@ -8,31 +8,39 @@ category: Editor
 
 import { Callout } from '@/components/ui/Callout'
 
-Are you using plain JavaScript or a framework that isn't listed? No worries, we provide everything you need.
+Are you building without a frontend framework like React or Vue? No problem, you can use Tiptap directly in plain JavaScript.
 
 <Callout title="Hint" variant="hint">
-    If you don't use a bundler like Webpack or Rollup, please follow the [CDN](/editor/getting-started/install/cdn) guide instead. Since Tiptap is built in a modular way, you will need to use `<script type="module">` in your HTML to get our CDN imports working.
+
+"Vanilla JavaScript" here means **no frontend framework**, but still using **modern JavaScript with ES module imports** (e.g. through Vite, Rollup, or Webpack).
+
+If you’re not using a build tool, check out the [CDN example below](#using-a-cdn-no-build-step) for an example that runs directly in the browser.
+
 </Callout>
 
 ## Install dependencies
 
-For the following example, you will need `@tiptap/core` (the actual editor), `@tiptap/pm` (the ProseMirror library), and `@tiptap/starter-kit`. The StarterKit doesn't include all extensions, only the most common ones.
+You’ll need the core Tiptap packages to get started:
+
+- `@tiptap/core` – the main editor API  
+- `@tiptap/pm` – ProseMirror, the engine behind Tiptap  
+- `@tiptap/starter-kit` – a convenient bundle of common extensions
 
 ```bash
 npm install @tiptap/core @tiptap/pm @tiptap/starter-kit
 ```
 
 ### Add markup
 
-Add the following HTML where you'd like to mount the editor:
+Add a simple container in your HTML where you want the editor to appear:
 
 ```html
 <div class="element"></div>
 ```
 
 ## Initialize the editor
 
-Everything is in place, so let's set up the editor. Add the following code to your JavaScript:
+Create a JavaScript file (for example `src/main.js`) and add the following code:
 
 ```js
 import { Editor } from '@tiptap/core'
@@ -45,7 +53,33 @@ new Editor({
 })
 ```
 
-Open your project in the browser to see Tiptap in action. Good work!
+Now run your dev server (for example with Vite: `npm run dev`) and open the page in your browser. You should see a working Tiptap editor.
+
+## A quick note about styling
+
+Tiptap doesn’t include visual styles by default. The editor only outputs semantic HTML. You can style it however you like with your own CSS or a framework such as Tailwind or Bootstrap.
+
+If you’re using the StarterKit, it includes minimal defaults that make the text render like a basic document.
+Learn more in the [Styling guide](/editor/getting-started/style-editor).
+
+## Using a CDN (no build step)
+
+If you’d rather skip the build tool, here’s a working example using CDN imports:
+
+```html
+<script type="module">
+  import { Editor } from 'https://esm.sh/@tiptap/core'
+  import StarterKit from 'https://esm.sh/@tiptap/starter-kit'
+
+  new Editor({
+    element: document.querySelector('.element'),
+    extensions: [StarterKit],
+    content: '<p>Hello from CDN!</p>',
+  })
+</script>
+
+<div class="element"></div>
+```
 
 ## Next steps