josdejong/jsoneditor

어떤 프로젝트인가요?

핵심 기능

• 01필드와 값을 편집하고, 이동하고, 복제하고, 정렬할 수 있는 트리 모드.
• 02구문 강조, 포맷팅, 압축을 지원하는 코드 모드.
• 03최대 500 MiB의 JSON 문서를 처리할 수 있는 미리보기 모드.
• 04모든 모드에서 ajv를 사용한 JSON Schema 검증.
• 05JMESPath 쿼리로 JSON 데이터 변환.
• 06잘못된 JSON 복구.

활용 사례

• 웹 관리 패널이나 설정 도구에 JSON 편집기 삽입.
• 브라우저에서 API 응답이나 설정 파일을 확인하고 수정.
• 사용자가 제출한 데이터를 저장하기 전에 스키마에 맞는지 JSON 검증.
• 미리보기 모드로 대용량 JSON 파일 보기.

빠른 시작

1. 1

   npm으로 라이브러리를 설치합니다

   npm install jsoneditor
2. 2

   HTML 페이지에 CSS 및 JS 파일을 포함하고 컨테이너 요소 안에 에디터를 만듭니다

사용 전 알아둘 점

• !README에는 후속 프로젝트로 svelte-jsoneditor가 언급되어 있으며, 새 에디터가 완전히 동일한 대체품은 아니라고 안내되어 있습니다.

토픽

자주 묻는 질문

jsoneditor은(는) 무엇인가요?

웹 앱에 삽입해 사용할 수 있는 트리, 코드, 텍스트, 미리보기 모드의 웹 기반 JSON 뷰어 및 편집기 컴포넌트입니다. JSON Editor를 사용하면 브라우저에서 JSON을 보고, 편집하고, 포맷팅하고, 검증할 수 있습니다. 여러 모드를 제공합니다. 트리 편집기에서는 필드와 값을 시각적으로 변경할 수 있고, 코드 편집기에서는 구문 강조를 지원하며, 일반 텍스트 편집기와 최대 500 MiB 문서를 위한 미리보기 모드도 사용할 수 있습니다.

jsoneditor은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?

jsoneditor은(는) Apache-2.0 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.

jsoneditor은(는) 아직 유지보수되고 있나요?

활발히 유지보수 중. jsoneditor의 마지막 커밋은 2026년 11월 1일입니다.

jsoneditor은(는) 어디에 사용할 수 있나요?

웹 관리 패널이나 설정 도구에 JSON 편집기 삽입. 브라우저에서 API 응답이나 설정 파일을 확인하고 수정. 사용자가 제출한 데이터를 저장하기 전에 스키마에 맞는지 JSON 검증. 미리보기 모드로 대용량 JSON 파일 보기.

jsoneditor는 어떻게 설치하나요?

npm으로 라이브러리를 설치합니다: npm install jsoneditor HTML 페이지에 CSS 및 JS 파일을 포함하고 컨테이너 요소 안에 에디터를 만듭니다

jsoneditor은(는) 어디서 받을 수 있나요?

소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/josdejong/jsoneditor