환상적인 웹 디자인 툴

시작하기 에디터 실행

CSS Style Editor

CSS 속성을 위한 편집기를 지원합니다. filter, gradient, box-shadow 등 많은 속성을 편집할 수 있게 됩니다.

간단한 트랜스폼 UI

원형의 UI 를 사용하여 드래그 형식을 통해서 3d 트랜스폼 속성을 쉽게 편집할 수 있습니다.

심플한 SVG Editor

간단한 Path 에디터를 제공합니다. CSS 와 SVG 형태의 요소도 잘 결합 할 수 있도록 필요한 모든 곳에 path 에디팅을 지원합니다.

애니메이션 툴

CSS 속성인 transition 과 animation 을 통한 애니메이션을 지원합니다.
keyframes 를 생성을 해서 적용합니다. cubic-bezier 에디터를 통해서 타이밍을 조절 할 수 있습니다.

애셋 매니저

공통으로 사용되는 색, 그라디언트, 그라디언트 패턴, SVG 필터, 이미지 에 대한 리스트를 제공하고 있습니다.

타임라인

타임라인 형태의 애니메이션 도구를 지원합니다. anipa 라이브러리를 통해서 플레이 할 수 있습니다.

코드 내보내기

화면에 보이는 모든 것은 CSS와 SVG의 코드입니다. 다운로드나 CodePen 내보내기를 통해서 코드를 확인 할 수 있습니다.

오픈소스와 MIT 라이센스

기본적으로 툴은 오픈소스로 되어 있습니다. 그리고 MIT 라이센스를 가집니다. 덕분에 누구나 가져가서 쉽게 활용 할 수 있습니다.

확장과 커스터마이징

Sapa 라이브러리와 함께 간단한 UI 를 만들어서 툴을 확장시킬 수 있습니다.
Sapa 에 대해서는 여기를 참고하세요.

분리된 UI

에디터 내부에서 사용되는 실용적인 서브 에디터들을 하나의 라이브러리 형태로 제공합니다. 이미 ColorPicker and GradientPicker 을 라이브러리 형태로 제공하고 있습니다. 필요한 기능이 있으면 요청해주세요.