Skip to content

idrawjs/studio

Folders and files

NameName
Last commit message
Last commit date

Latest commit

772374a · Aug 11, 2024
May 26, 2024
Dec 16, 2023
Jun 23, 2024
Aug 11, 2024
May 26, 2024
Mar 10, 2023
Dec 16, 2023
Mar 2, 2024
Dec 16, 2023
Jan 23, 2022
Feb 17, 2024
Jun 23, 2024
Aug 11, 2024
Aug 11, 2024
Oct 15, 2023
Oct 15, 2023
Oct 15, 2023
Dec 16, 2023

Repository files navigation

@idraw/studio

Version License

idrawjs.com/studio/

Sponsors

@idraw/studio is an MIT-licensed open source project with its ongoing development made possible entirely by the support of these awesome backers. If you'd like to join them, please consider sponsoring iDrawjs's development.

Become a Backer

@idraw/studio Preview

You can click idrawjs.com/studio/ to experience it.

The preview of @idraw/studo.

idraw-studio-light-theme idraw-studio-dark-theme

Usage

# Install peer dependcies
npm install antd idraw

npm install @idraw/studio
import * as React from 'react';
import { createRoot } from 'react-dom/client';
import { Studio } from '@idraw/studio';
import '@idraw/studio/dist/css/index.css'

const App = () => { 
  const [width, setWidth] = useState<number>(window.innerWidth);
  const [height, setHeight] = useState<number>(window.innerHeight);
  useEffect(() => {
    window.addEventListener('resize', () => {
      setWidth(window.innerWidth);
      setHeight(window.innerHeight);
    });
  }, []); 

  return (
    <Studio
      width={width}
      height={height} 
      data={data}
      defaultScaleInfo={{ 
        scale: 1,
        offsetX: 0,
        offsetY: 0
      }}
    />
  );
};

const root = createRoot(document.querySelector('#app'));
root.render(<App />);

Development

git clone git@github.com:idrawjs/studio.git

cd studio

pnpm install

npm run dev