> For the complete documentation index, see [llms.txt](https://docs.sysout.co.kr/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.sysout.co.kr/etc/naver-toastui-editor/viewer-quick-start.md).
# Viewer 만들기
## Viewer 만들기
이 문서에서는 Toast UI Editor를 이용하여 Viewer를 만드는 방법에 대해서 소개한다.
### 의존성 추가
의존성은 Editor와 동일하게 설정한다.
[Editor 만들기](/etc/naver-toastui-editor/editor-quick-start.md#dependencies)
### Viewer 영역 생성
viewer로 만들 영역을 HTML 내부에 div 태그로 작성한다.
```markup
```
### Viewer 생성
javascript 코드를 사용하여 viewer를 다음과 같이 생성한다.
```javascript
const viewer = toastui.Editor.factory({
el : document.querySelector(".toast-custom-viewer"),
viewer : true,
initialValue : "Hello toast ui viewer~!"
});
```
만약 생성자를 이용하고 싶다면 CDN을 변경해야 한다.
```markup
```
Viewer용 CDN을 사용하면 에디터와 동일한 생성코드로 Viewer를 만들 수 있다.
```javascript
const viewer = new toastui.Editor({
el : document.querySelector(".toast-custom-viewer"),
initialValue : "Hello toast ui viewer~!"
});
```
### 전체 코드
```markup
Toast UI Editor example