Smoostyle

Smoostyle is a tool that lets you design your website's style on the browser.

Usage

1. Install it into your project: npm install smoostyle
2. In your App.vue (take Vue as an example), import and register the event handlers from smoostyle:

// App.vue

<script>
import { onMounted, onUnmounted } from 'vue';
import { SmHandleMessage, SmHandleMouseMove, SmHandleMouseDown, SmHandleScroll } from 'smoostyle';

export default {
  name: 'App',
  setup() {
    onMounted(() => {
      window.addEventListener('message', SmHandleMessage);
      window.addEventListener('mousemove', SmHandleMouseMove);
      window.addEventListener('mousedown', SmHandleMouseDown);
      window.addEventListener('scroll', SmHandleScroll);
    });
    onUnmounted(() => {
      window.removeEventListener('message', SmHandleMessage);
      window.removeEventListener('mousemove', SmHandleMouseMove);
      window.removeEventListener('mousedown', SmHandleMouseDown);
      window.removeEventListener('scroll', SmHandleScroll);
    });
  }
}
</script>

3. Start your project: npm start if it's a React project, npm run serve if your developing a Vue project...
4. Run the following command to apply real-time changes on your project: npx smoostyle start