diff --git a/src/content/docs/en/guides/integrations-guide/solid-js.mdx b/src/content/docs/en/guides/integrations-guide/solid-js.mdx index 15d3b9c1dd4c3..5a8b8952651c5 100644 --- a/src/content/docs/en/guides/integrations-guide/solid-js.mdx +++ b/src/content/docs/en/guides/integrations-guide/solid-js.mdx @@ -6,7 +6,8 @@ githubIntegrationURL: 'https://github.com/withastro/astro/tree/main/packages/int category: renderer i18nReady: true --- -import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' +import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'; +import Since from '~/components/Since.astro'; This **[Astro integration][astro-integration]** enables server-side rendering and client-side hydration for your [SolidJS](https://www.solidjs.com/) components. @@ -98,6 +99,42 @@ To use your first SolidJS component in Astro, head to our [UI framework document * 💧 client-side hydration options, and * 🤝 opportunities to mix and nest frameworks together +## Configuration + +### devtools + +

+ +You can enable [Solid DevTools](https://github.com/thetarnav/solid-devtools) in development by passing an object with `devtools: true` to your `solid()` integration config and adding `solid-devtools` to your project dependencies: + + + + ```sh + npm install solid-devtools + ``` + + + ```sh + pnpm add solid-devtools + ``` + + + ```sh + yarn add solid-devtools + ``` + + + +```js title="astro.config.mjs" +import { defineConfig } from 'astro/config'; +import solid from '@astrojs/solid'; + +export default defineConfig({ + // ... + integrations: [solid({ devtools: true })], +}); +``` + ## Options ### Combining multiple JSX frameworks