DevMode Web Component

A floating dev mode toggle web component built with StencilJS. This component provides a sleek, non-intrusive way to toggle development mode in your web applications.

Features

• 🎯 Floating pill design that stays out of the way
• 🔒 Origin-based visibility control
• 💫 Smooth animations and modern styling
• 🎨 Clean, minimal interface
• 📱 Responsive and mobile-friendly

Installation

npm install devmode-wc

Usage

Script tag

<!-- Add to your index.html -->
<script type="module" src="node_modules/devmode-wc/dist/devmode-wc/devmode-wc.esm.js"></script>

<!-- Use anywhere in your HTML -->
<devmode-wc></devmode-wc>

Framework Integration

React

import { defineCustomElements } from 'devmode-wc/loader';
defineCustomElements();

// In your component
const App = () => {
  const handleToggle = (event) => {
    console.log('Dev mode:', event.detail);
  };

  return (
    <devmode-wc
      allowed-origin="http://localhost:3000"
      onPillToggled={handleToggle}
    />
  );
};

Vue

import { defineCustomElements } from 'devmode-wc/loader';
defineCustomElements();

<template>
  <devmode-wc
    :allowed-origin="allowedOrigin"
    @pillToggled="handleToggle"
  />
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      allowedOrigin: 'http://localhost:3000'
    }
  },
  methods: {
    handleToggle(event) {
      console.log('Dev mode:', event.detail);
    }
  }
}
</script>

Angular

// In your app.module.ts
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { defineCustomElements } from 'devmode-wc/loader';

defineCustomElements();

@NgModule({
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})

// In your component
<devmode-wc
  [allowed-origin]="allowedOrigin"
  (pillToggled)="handleToggle($event)"
></devmode-wc>

Properties

| Property | Attribute | Description | Type | Default | | -------------- | --------------- | ------------------------------------------------ | -------- | ----------- | | allowedOrigin | allowed-origin | Only show component on this origin. If not set, shows everywhere | string | undefined |

Events

| Event | Description | Type | | ------------- | ------------------------------------- | ---------------------- | | pillToggled | Emitted when the toggle is switched | CustomEvent<boolean> |

Styling

The component uses the Inter font family by default. Make sure to include the font in your project:

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@500&display=swap" rel="stylesheet">

License

MIT License