open-index/open-npm huggingface dataset:
npm package: @qwik.dev/devtools
Description: Qwik devtools package
Latest version: 0.2.8

# Qwik DevTools

![Qwik DevTools](https://raw.github.com/QwikDev/devtools/main/assets/screenshot.png)

Enhance your Qwik development experience with DevTools that provide real-time insights into your application, dependencies, and setup.

## Installation

> Qwik DevTools requires **Qwik v2.0.0-beta.1 or higher**.

```shell copy
npm install @qwik.dev/devtools -D
```

```shell copy
pnpm add @qwik.dev/devtools -D
```

```shell copy
yarn add @qwik.dev/devtools -D
```

## Setup

Add the plugin to your `vite.config.(m)ts`:

```ts copy
import { qwikDevtools } from '@qwik.dev/devtools';

export default defineConfig({
  plugins: [
    qwikRouter(),
    qwikVite(),
    tsconfigPaths(),
    qwikDevtools(), // 👈 Add the plugin here
  ],
  ssr: {
    noExternal: ['@qwik.dev/devtools']; // 👈 Add the plugin here
  }
});
```

## Features

- 🔍 Route Explorer
- ⚡️ Dependency Explorer
- 📊 Asset Explorer
- 🐞 Debug Tools

## Contribution Guide

Please refer to the [Contribution Guide](./CONTRIBUTING.md). Sharing feedback and feature request with GitHub issues is welcome.

## Community

Join our vibrant community:

- 🐦 Follow [@QwikDev](https://twitter.com/QwikDev) on Twitter
- 💬 Join our [Discord](https://qwik.dev/chat) community
- 🌐 Check out [other community groups](https://qwik.dev/ecosystem/#community)

## Related Links

- [📚 Qwik Documentation](https://qwik.dev/)
- [💬 Discord Chat](https://qwik.dev/chat)
- [⭐️ Qwik GitHub](https://github.com/QwikDev/qwik)
- [🐦 @QwikDev](https://twitter.com/QwikDev)
- [⚡️ Vite](https://vitejs.dev/)
npm package: @qwikdev/create-roadplan
Description: Interactive CLI for create a Qwik documentation starter
Author: QwikDev
Latest version: 0.0.3

<p align="center">
<br/>
  <img width="300" src="./docs/logo.png" alt="Qwik documentation starter">
  <br/>
  <br/>
</p>

<h1 align='center'>Road Plan</h1>

<div align='center'>
  <h3>Interactive CLI for create documentation starter powered by <a href='https://github.com/BuilderIO/qwik'>Qwik</a></h3>
</div>

### RoadPlan CLI

```shell
pnpm create @qwikdev/roadplan
yarn create @qwikdev/roadplan
npm create @qwikdev/roadplan
bun create @qwikdev/roadplan
```

<div align='center'>
  <img src="./docs/cli.gif" alt="RoadPlan CLI"/>
</div>
npm package: @qwikdev/qwik-preact
Description: QwikPreact allows adding Preact components into existing Qwik application
Latest version: 0.1.2

# qwik-preact ⚡️

QwikPreact allows adding Preact components into existing Qwik application

## How to Integrate into a Qwik app

Integration is pretty much the same as <https://qwik.builder.io/docs/integrations/react/>.

First, install `@qwikdev/qwik-preact` with npm, pnpm or yarn. Instead of `react` and `react-dom`, you will need to install `preact` and `preact-render-to-string`. And don't forgot `/** @jsxImportSource preact */`

preact.tsx

```tsx
/** @jsxImportSource preact */
import { qwikify$ } from '@qwikdev/qwik-preact';
import { useState } from 'preact/hooks';

// Create Preact component standard way
function Counter() {
  const [count, setCount] = useState(0);
  return (
    <button className="preact" onClick={() => setCount(count + 1)}>
      Count: {count}
    </button>
  );
}

// Convert Preact component to Qwik component
export const QCounter = qwikify$(Counter, { eagerness: 'hover' });
```

index.tsx

```tsx
import { component$ } from '@builder.io/qwik';
import { QCounter } from './preact';

export default component$(() => {
  return (
    <main>
      <QCounter />
    </main>
  );
});
```

vite.config.ts

```ts
// vite.config.ts
import { qwikPreact } from '@qwikdev/qwik-preact/vite';
 
export default defineConfig(() => {
   return {
     ...,
     plugins: [
       ..., 
       // The important part
       qwikPreact()
     ],
   };
});
```

Please keep in mind that this is an experimental implementation based on `qwik-react` implementation. So, there might be bugs and unwanted behaviours.

---

## Related

- [Qwik Docs](https://qwik.builder.io/docs/)
- [Qwik on GitHub](https://github.com/BuilderIO/qwik)
- [@QwikDev](https://twitter.com/QwikDev)
- [Discord](https://qwik.builder.io/chat)
- [Vite](https://vitejs.dev/)
- [Partytown](https://partytown.builder.io/)
- [Mitosis](https://github.com/BuilderIO/mitosis)
- [Builder.io](https://www.builder.io/)