VizieWorx

Vizie Worx Vizie Worx

What is VizieWorx

VizieWorx is a powerful UI component library that empowers users to design and export stunning interfaces effortlessly. Whether you're a seasoned developer or just starting, our library provides an intuitive and feature-rich environment to create beautiful HTML designs with ease.

Key Features

Drag-and-Drop Interface: Seamlessly drag and drop components onto the canvas, allowing for a fluid and interactive design experience.
Rich Component Library: Choose from a comprehensive collection of pre-built components, including buttons, forms, cards, and more, to expedite your design process.
Customization at Your Fingertips: Effortlessly customize styles, colors, and layouts to match your brand or project requirements. Our library gives you complete control over every aspect of your design.
Real-Time Preview: Witness your design come to life with our real-time preview feature. Instantly visualize how your components will appear and behave.
Export to HTML: With a single click, export your design to clean and optimized HTML code. Integration with your projects has never been this straightforward.
Responsive Design: Ensure your designs look stunning on all devices. Our library supports responsive design principles, making it easy to create interfaces that adapt to various screen sizes.

Transform your design ideas into reality with VizieWorx. Explore endless possibilities and streamline your UI development process today!

Ready to implement in your code?

Install the package

npm install vizie-worx

Example Usage

import { VizieWorx } from 'vizie-wox'
export default function VizieWorxWrapper() => {
  return (
    <VizieWorx />
  )
}

Observe on code change

import { VizieWorx } from 'vizie-wox'
import { useRef } from 'react';

export default function VizieWorxWrapper() => {
  const styleRef = useRef();
  const codeRef = useRef();
  
  const onCodeUpdate = (style, code) => {
    styleRef.current = style;
    codeRef.current = code;
  }
  
  return (
    <VizieWorx
      onUpdateCode={onCodeUpdate}
    />
  )
}

Full documentation is yet to be updated...

Made by Kaustubh Vats