JSX Tool은 어떤 상황에서 사용하나요?

JSX Tool은 픽셀 퍼펙트 UI 구현을 위한 라이브 컴포넌트 스타일 조정, 디자인 시스템 일관성 확인 및 빠른 스타일 수정, AI 보조 UI 구현으로 CSS 작성 시간 단축 등의 상황에서 활용할 수 있습니다.

JSX Tool의 주요 기능은 무엇인가요?

JSX Tool의 핵심 기능으로는 클릭 한 번으로 React 컴포넌트 선택 및 JSX/CSS 즉시 편집, 브라우저 스크린샷을 LLM 컨텍스트로 전달하는 AI 스타일 제안, TypeScript·Tailwind·ESLint·Prettier LSP 내장 자동완성 및 타입 검사 등이 있습니다.

JSX툴

JSX Tool

브라우저 안에서 React JSX와 CSS를 실시간으로 수정하고 AI로 스타일 변경을 코드로 변환해주는 개발자 도구

부분 무료WebBrowser Extension오픈소스

웹사이트 방문하기jsxtool.com

검증된 사실

최신 버전: 1.0.14
GitHub: ★ 178
최근 변경: 2026-02-09 JSX Tool, TypeScript·Tailwind·ESLint·Prettier LSP 통합 및 @Tagging 기능 출시—브라우저 내 React 컴포넌트 AI 편집 워크플로우 완성. 소스: h

2026-06-15 직접 확인 · 자동 검증 데이터

제품 화면

2026-06-15 확인

가격 정보

부분 무료시작 가격: Free / $16.67/mo (Individual)

무료 플랜은 하루 약 10개의 AI 프롬프트를 제공하며 브라우저 내 IDE 기능을 포함합니다. Pro 플랜은 월 $20(연간 결제 시 월 $16.67)로, 월 1,500개의 AI 크레딧과 스크린샷 프롬프트, 개인 API 키 사용 기능을 제공합니다. 팀 플랜은 월 $40(연간 결제 시 월 $33.33)에 멤버 관리 및 SSO 기능을 추가로 지원합니다.

가격표 확인하기

최근 업데이트와 소식

버전 업데이트2026-02-09
JSX Tool, TypeScript·Tailwind·ESLint·Prettier LSP 통합 및 @Tagging 기능 출시—브라우저 내 React 컴포넌트 AI...
JSX Tool, TypeScript·Tailwind·ESLint·Prettier LSP 통합 및 @Tagging 기능 출시—브라우저 내 React 컴포넌트 AI 편집 워크플로우 완성.
버전 업데이트2025-12-09
YC F25 배치로 공개 출시 — in-browser React IDE Chrome 확장 프로그램 및 dev server 출시, 프리미엄 플랜 $20/월 책정.
YC F25 배치로 공개 출시 — in-browser React IDE Chrome 확장 프로그램 및 dev server 출시, 프리미엄 플랜 $20/월 책정.
소식2025-11-26
브라우저 내 실시간 React 컴포넌트 편집 및 AI 기반 스타일링 제안 기능 고도화(v1.0.14)
브라우저 내 실시간 React 컴포넌트 편집 및 AI 기반 스타일링 제안 기능 고도화(v1.0.14)

소개AI 요약

JSX Tool은 브라우저 내에서 직접 React 코드를 작성하고 수정할 수 있는 전용 IDE 및 확장 프로그램입니다. 이 도구는 엘리먼트 인스펙터와 컴포넌트 선택기의 기능을 통합하여, 개발자가 브라우저를 벗어나지 않고도 실시간으로 JSX와 CSS를 검사하고 세밀하게 조정할 수 있는 환경을 제공합니다. 특히 스크린샷을 LLM에 전달하여 스타일 변경 사항을 정확한 코드로 변환해 주는 AI 기능은 컨텍스트 전환 없이 작업 효율을 극대화해 줍니다. 주로 React 프로젝트를 다루는 프론트엔드 개발자와 웹 디자이너를 대상으로 하며, 목업이 아닌 실제 라이브 페이지에서 픽셀 퍼펙트한 UI를 구현하는 데 활용됩니다. 가격 정책은 무료로 제공되는 프리 티어를 기본으로 하며, 더 높은 AI 크레딧과 고급 기능이 필요한 개인 사용자와 조직을 위해 월 $16.67 및 $33.33부터 시작하는 유료 플랜이 마련되어 있습니다.