Repolode
GrapesJS

GrapesJS/grapesjs

코딩 없이 드래그 앤 드롭으로 HTML 템플릿과 페이지 편집기를 만들 수 있는 무료 오픈소스 웹 빌더 프레임워크입니다.

대체할 수 있는 제품:WixWebflow

스타
26,328
포크
4,653
열린 이슈
30
마지막 커밋
17시간 전

어떤 프로젝트인가요?

GrapesJS는 웹사이트, 뉴스레터, 모바일 앱에 사용할 HTML 템플릿을 시각적으로 만들 수 있는 무료 오픈소스 웹 빌더 프레임워크입니다. 주로 CMS에 임베드해 사용자가 코드를 작성하지 않고 동적 템플릿을 만들 수 있도록 설계되었습니다. 템플릿은 구조(HTML), 스타일(CSS), 서버에서 나중에 값을 채우고 클라이언트에서 렌더링하는 변수로 구성됩니다.

에디터에는 블록 관리자, 스타일 관리자, 레이어 관리자, 코드 뷰어, 에셋 관리자가 포함되어 있습니다. 내장 명령어를 사용해 컴포넌트를 만들고 관리할 수 있으며, 로컬 및 원격 저장소를 지원합니다. npm, unpkg 및 CDNJS 같은 CDN, Git을 통해 배포됩니다.

플러그인 시스템으로 코어 기능을 확장할 수 있으며, 프로젝트는 React 래퍼, 웹페이지 및 뉴스레터(MJML) 빌더용 프리셋, 컴포넌트·저장소·스타일 속성을 위한 다양한 커뮤니티 및 공식 플러그인을 제공합니다.

핵심 기능

  • 01드래그 앤 드롭 블록 관리자로 페이지 구조 구성
  • 02스타일 관리자로 컴포넌트 CSS를 시각적으로 편집
  • 03레이어 관리자와 코드 뷰어로 템플릿 확인
  • 04에셋 관리자로 이미지 및 기타 미디어 관리
  • 05템플릿 저장을 위한 로컬 및 원격 저장소
  • 06React 래퍼와 웹페이지 및 뉴스레터 프리셋을 제공하는 플러그인 시스템

활용 사례

  • 비개발자도 템플릿을 만들 수 있도록 CMS에 시각적 페이지 편집기 추가
  • 드래그 앤 드롭 편집기로 이메일 뉴스레터 템플릿 제작
  • 자체 웹 애플리케이션에 노코드 웹사이트 빌더 구현

빠른 시작

  1. 1

    npm에서 GrapesJS를 설치합니다

    npm i grapesjs
  2. 2

    README 사용 예시에 나온 것처럼 CSS 및 JS 파일을 포함하고 init 스크립트가 있는 컨테이너 div를 만듭니다

토픽

자주 묻는 질문

grapesjs은(는) 무엇인가요?
코딩 없이 드래그 앤 드롭으로 HTML 템플릿과 페이지 편집기를 만들 수 있는 무료 오픈소스 웹 빌더 프레임워크입니다. GrapesJS는 웹사이트, 뉴스레터, 모바일 앱에 사용할 HTML 템플릿을 시각적으로 만들 수 있는 무료 오픈소스 웹 빌더 프레임워크입니다. 주로 CMS에 임베드해 사용자가 코드를 작성하지 않고 동적 템플릿을 만들 수 있도록 설계되었습니다. 템플릿은 구조(HTML), 스타일(CSS), 서버에서 나중에 값을 채우고 클라이언트에서 렌더링하는 변수로 구성됩니다.
grapesjs은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?
grapesjs은(는) Other 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.
grapesjs은(는) 아직 유지보수되고 있나요?
활발히 유지보수 중. grapesjs의 마지막 커밋은 2026년 10월 21일입니다.
grapesjs은(는) 어디에 사용할 수 있나요?
비개발자도 템플릿을 만들 수 있도록 CMS에 시각적 페이지 편집기 추가 드래그 앤 드롭 편집기로 이메일 뉴스레터 템플릿 제작 자체 웹 애플리케이션에 노코드 웹사이트 빌더 구현
grapesjs는 어떻게 설치하나요?
npm에서 GrapesJS를 설치합니다: npm i grapesjs README 사용 예시에 나온 것처럼 CSS 및 JS 파일을 포함하고 init 스크립트가 있는 컨테이너 div를 만듭니다
grapesjs은(는) 어디서 받을 수 있나요?
소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/GrapesJS/grapesjs

요약은 프로젝트 README를 바탕으로 AI가 작성했습니다. GitHub 통계는 매일 갱신됩니다.

관련 프로젝트