vercel/satori

어떤 프로젝트인가요?

핵심 기능

• 01JSX 또는 React 유사 객체를 SVG 문자열로 변환
• 02Taffy를 통한 Flexbox, Grid 및 블록 레이아웃
• 03OpenType 기능과 오른쪽에서 왼쪽으로 쓰는 텍스트를 포함한 HarfBuzz 텍스트 셰이핑
• 04TTF, OTF, WOFF, WOFF2 폰트 지원
• 05선택자, @media 및 @container 쿼리를 지원하는 스타일시트
• 06실험적 WebGL 캔버스 및 원근 변환

활용 사례

• 빌드 시점이나 요청 시점에 동적인 Open Graph 이미지와 소셜 카드 이미지 생성
• 서버 사이드 이미지 파이프라인에서 텍스트가 많은 그래픽을 SVG로 렌더링
• SVG 출력을 Sharp에 전달해 PNG 이미지 생성

빠른 시작

1. 1

   npm에서 satori 패키지를 설치합니다(README 발췌 부분에는 설치 명령이 나와 있지 않습니다).

2. 2

   Overview 예시처럼 JSX 요소, width, height, fonts를 전달해 satori()를 호출합니다.

사용 전 알아둘 점

• !HTML과 CSS는 일부만 지원되며, 출력 결과가 브라우저 렌더링과 정확히 일치하지 않을 수 있습니다.
• !MPL-2.0 라이선스가 적용되며, 수정한 파일의 소스 변경 사항을 공유해야 합니다.

토픽

자주 묻는 질문

satori은(는) 무엇인가요?

JSX 입력과 자체 레이아웃 엔진을 사용해 HTML과 CSS를 SVG로 변환하는 유용한 라이브러리입니다. Satori는 JSX 요소 트리나 일반 React 유사 객체에 폰트 데이터와 캔버스 크기를 지정하면 SVG 문자열을 반환합니다. Taffy를 기반으로 Flexbox, Grid, 블록 레이아웃을 처리하는 자체 레이아웃 엔진을 구현하고, 텍스트 셰이핑에는 HarfBuzz를 사용합니다. 따라서 지원하는 HTML과 CSS의 하위 집합에 한해 브라우저 렌더링 결과와 일치하는 출력을 지향합니다.

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

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

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

활발히 유지보수 중. satori의 마지막 커밋은 2026년 10월 20일입니다.

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

빌드 시점이나 요청 시점에 동적인 Open Graph 이미지와 소셜 카드 이미지 생성 서버 사이드 이미지 파이프라인에서 텍스트가 많은 그래픽을 SVG로 렌더링 SVG 출력을 Sharp에 전달해 PNG 이미지 생성

satori는 어떻게 설치하나요?

npm에서 satori 패키지를 설치합니다(README 발췌 부분에는 설치 명령이 나와 있지 않습니다). Overview 예시처럼 JSX 요소, width, height, fonts를 전달해 satori()를 호출합니다.

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

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