# 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
```
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs.sysout.co.kr/etc/naver-toastui-editor/viewer-quick-start.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.