별도 에디터도, 복붙도, 배포도 필요 없습니다.
노션 페이지 위에서 HTML · CSS · JS · React를 작성하면
옆에서 실시간 프리뷰가 나타납니다.
노션에 코드 적어놓고, 결과 보려고 VSCode 켜서 복붙
수정할 때마다 노션 → 에디터 → 브라우저 왔다갔다
AI가 생성한 코드, 진짜 되는 건지 확인이 안 됨
코드 스니펫 모아두는데 결과를 바로 볼 수가 없음
→ CodePreviewer는 이 모든 문제를 해결합니다.
코드를 수정하는 즉시 옆 패널에서 결과를 확인합니다. 새로고침이 필요 없습니다.
JSX를 자동으로 트랜스파일합니다. import 문 없이 React 컴포넌트를 바로 작성하세요.
별도 설정 없이 Tailwind 유틸리티 클래스를 바로 사용할 수 있습니다.
규칙 문서를 @멘션하면 노션 AI가 올바른 포맷으로 코드를 자동 생성합니다.
모든 코드는 격리된 iframe에서 실행됩니다. 워크스페이스 데이터에 절대 접근하지 않습니다.
HTML, CSS, JS를 각각의 코드블록으로 분리 작성하면 자동으로 합쳐서 렌더링합니다.
Chrome 웹스토어에서 CodePreviewer를 검색하고 설치하세요. 클릭 한 번이면 끝.
노션 페이지에 html, css, javascript 코드블록을 순서대로 작성하세요. AI에게 맡겨도 됩니다.
페이지 오른쪽에 프리뷰 패널이 자동으로 열립니다. 코드를 수정하면 즉시 반영됩니다.
Vanilla 웹 개발의 기본. 코드블록 3개만으로 완성.
자동 트랜스파일. import 불필요. 즉시 컴포넌트 개발.
자동 주입. 유틸리티 클래스를 그대로 사용.
Chart.js, Three.js 등 CDN 라이브러리 자유롭게 추가.
AI에게 코드를 생성시키고, 노션 안에서 바로 결과를 확인하며 빠르게 반복합니다.
노션에 학습 노트를 정리하면서 코드 결과를 즉시 확인합니다. 별도 환경 세팅 불필요.
HTML/CSS 프로토타입을 노션에서 바로 만들고 팀과 공유합니다.
코드 스니펫과 실행 결과를 함께 보여주는 인터랙티브 문서를 작성합니다.
네, Extension 자체는 완전히 무료입니다. 노션 무료 플랜에서도 사용 가능합니다.
아닙니다. 모든 코드는 브라우저 로컬에서만 처리됩니다. 어떤 데이터도 서버로 전송되지 않습니다.
현재는 Vanilla JS와 React(JSX/TSX)를 지원합니다. Vue와 Svelte는 개발 로드맵에 포함되어 있습니다.
팀원도 Extension을 설치하면 같은 노션 페이지에서 동일한 프리뷰를 확인할 수 있습니다.
"한 페이지 = 한 화면" 원칙을 권장합니다. 여러 컴포넌트는 별도 페이지로 분리하세요.
Chrome 및 Chromium 기반 브라우저(Edge, Brave, Arc 등)를 지원합니다.