# Làm quen với trình soạn thảo

Làm quen với Structure, các tab chỉnh sửa, phần xem trước và dữ liệu để biết bắt đầu từ đâu trong editor.

Khi mở một mẫu, bạn sẽ thấy các phần của tài liệu, vùng chỉnh sửa và bản xem trước nằm cạnh nhau. Bạn có thể chọn một phần để sửa, rồi nhìn sang preview để xem kết quả mà không cần rời khỏi editor.

Bắt đầu từ **Structure** để chọn phần muốn sửa, dùng các tab bên cạnh để chỉnh nội dung, rồi chuyển sang **Run** khi muốn tạo PDF. Các hình dưới đây chỉ rõ từng vùng trong giao diện.

## 1. Structure: chọn phần muốn sửa

**Structure** nằm bên trái, hiển thị cách mẫu được chia thành các page và section. Chọn một mục ở đây để mở các tùy chọn của mục đó trong vùng chỉnh sửa bên cạnh.

- **Global** chứa các thiết lập dùng chung cho mẫu.
- **Page** đại diện cho một page trong bố cục, gồm các section bên trong.
- **Section** là một khối nội dung, chẳng hạn phần thông tin khách hàng hoặc bảng dịch vụ trên hóa đơn.
- **Header / Footer** là phần đầu và cuối trang khi mẫu có sử dụng.

Ví dụ, để sửa nhãn ở phần thông tin khách hàng, chọn section **Billing Parties**. Để xem thiết lập chung như font hoặc màu nền, chọn **Global**.

<figure class="doc-sim data-assets-illustration tour-illustration" aria-label="Structure → chọn section để mở phần chỉnh sửa">
<div class="sim-stage"><div class="sim-panel tour-tree"><div class="ds-head"><strong>STRUCTURE</strong><span class="sim-control">＋</span></div><div class="tour-tree-row">⌄ &nbsp; Global <span class="sim-badge">1/2</span></div><div class="tour-tree-row tour-child">▤ &nbsp; Footer</div><div class="tour-tree-row">⌄ &nbsp; 01 Page <span class="sim-badge">3</span></div><div class="tour-tree-row tour-child">▤ &nbsp; Heading</div><div class="tour-tree-row tour-child sim-selected sim-focus">▤ &nbsp; Content <span class="sim-badge">4p</span></div><div class="tour-tree-row tour-child">▤ &nbsp; Summary</div></div></div>
<figcaption>Structure → chọn section để mở phần chỉnh sửa</figcaption>
</figure>

## 2. HTML, CSS, Props và Config

Sau khi chọn một mục trong Structure, vùng bên cạnh sẽ hiện các tab bạn có thể chỉnh:

- **HTML**: nội dung và cách sắp xếp các thành phần trong section.
- **CSS**: cách trình bày, như màu sắc, kích thước chữ và khoảng cách.
- **Props**: các giá trị được lưu cùng mẫu, thường là nhãn, màu hoặc nội dung dùng lại.
- **Config**: các thiết lập của phần đang chọn, như lề, nền hoặc ngắt trang.

Với mẫu có sẵn, bạn có thể mở **Props** để đổi nhãn mà chưa cần sửa HTML/CSS. Hình bên dưới minh họa prop `heading` của section đang chọn; HTML đọc giá trị này qua `{{ props.heading }}`.

Các tab phụ thuộc vào mục đang chọn. Chẳng hạn, **Global** có Props và Config, còn một section có thể có đủ HTML, CSS, Props và Config. Khi chọn một variant kế thừa từ bản gốc, các tùy chọn chỉnh sửa cũng có thể ít hơn.

<figure class="doc-sim data-assets-illustration tour-illustration" aria-label="Section → Props → giá trị được dùng trong HTML">
<div class="sim-stage"><div class="sim-panel"><div class="sim-tabs tour-tabs"><span>HTML</span><span>CSS</span><span class="sim-active">Props</span><span>Config</span></div><div class="ds-head"><strong>SECTION · Content</strong></div><div class="sim-prop-card ds-field"><div class="sim-prop-name"><b>heading</b><span class="ds-type">Text</span></div><div class="sim-prop-value"><small class="sim-label">VALUE</small><span class="sim-input sim-focus">Tiêu đề tài liệu</span><span class="sim-embed">{{ props.heading }}</span></div></div></div></div>
<figcaption>Section → Props → giá trị được dùng trong HTML</figcaption>
</figure>

## 3. Layout và PDF: xem kết quả

Vùng xem trước nằm cạnh vùng chỉnh sửa, với hai chế độ **Layout** và **PDF**.

**Layout** giúp bạn nhìn cách các section ghép thành tài liệu khi đang làm việc. **PDF** cho bạn xem tài liệu dưới dạng trang, tiện để kiểm tra lề, header/footer và cách nội dung chuyển sang trang tiếp theo.

Trong **Layout**, bạn làm việc với các page và section của mẫu. Khi chuyển sang **PDF**, vùng này hiển thị kết quả phân trang, bao gồm những tờ phát sinh khi nội dung dài hơn một trang.

<figure class="doc-sim data-assets-illustration tour-illustration" aria-label="Layout hiển thị bố cục · PDF hiển thị các tờ đã phân trang">
<div class="sim-stage"><div class="sim-panel"><div class="sim-tabs tour-tabs"><span>Layout</span><span class="sim-active sim-focus">PDF</span></div><div class="tour-sheets"><div><small>Page 1</small><div class="tour-sheet"><b>Tembuilder</b><span class="tour-line"></span><span class="tour-line"></span><span class="tour-line"></span><span class="tour-line"></span><small>1 / 2</small></div></div><div><small>Page 2</small><div class="tour-sheet"><b>Tembuilder</b><span class="tour-line"></span><span class="tour-line"></span><span class="tour-line"></span><span class="tour-line"></span><small>2 / 2</small></div></div></div></div></div>
<figcaption>Layout hiển thị bố cục · PDF hiển thị các tờ đã phân trang</figcaption>
</figure>

**Layout** phản ánh phần thiết kế đang chỉnh. **PDF** dựng nội dung mẫu đã lưu: hãy Save rồi tạo lại PDF preview sau khi sửa. Dữ liệu preview lấy từ các giá trị của editor, ban đầu là Default; giá trị nhập ở Run chỉ dùng cho công việc của Run. Bản PDF preview trước đó không tự cập nhật.

## 4. Parameters: dữ liệu của từng tài liệu

**Parameters** nằm ở bên phải. Đây là nơi xem và chỉnh cấu trúc dữ liệu mà mẫu nhận vào, chẳng hạn tên khách hàng, mã hóa đơn hoặc danh sách dịch vụ.

Chọn **Schema** để xem các trường, kiểu dữ liệu và giá trị mặc định. Chọn **Payload** để xem dữ liệu ở dạng JSON. Tên trường cần khớp với cách mẫu đọc dữ liệu trong HTML.

Chẳng hạn, trường `recipient` có biểu thức `{{ params.recipient }}` để chèn vào HTML. Giá trị mặc định nằm trong Schema; dữ liệu cho mỗi lần tạo PDF được nhập ở Run.

Nếu chưa rõ khi nào dùng Props, khi nào dùng Parameters, xem bài [Parameters và Props](/docs/vi/data/parameters-props/).

<figure class="doc-sim data-assets-illustration tour-illustration" aria-label="Parameters → Schema / Payload">
<div class="sim-stage"><div class="sim-panel"><div class="ds-head"><strong>Parameters</strong><span class="sim-control">＋ Add</span></div><div class="sim-tabs"><span class="sim-active">Schema</span><span>Payload</span></div><div class="sim-prop-card ds-field"><div class="sim-prop-name"><b>recipient</b><span class="ds-type">Text</span></div><div class="sim-prop-value"><small class="sim-label">DEFAULT</small><span class="sim-input sim-focus">Tembuilder</span><span class="sim-embed">{{ params.recipient }}</span></div></div></div></div>
<figcaption>Parameters → Schema / Payload</figcaption>
</figure>

## 5. Run và lịch sử

Sau khi đã lưu và publish mẫu, mở **Run** để chọn key, version, variant và nhập dữ liệu tạo PDF. Bạn có thể tiếp tục theo [hướng dẫn tạo PDF đầu tiên](/docs/vi/getting-started/first-pdf/) khi muốn thử trọn vẹn bước này.

Khi cần xem lại quá trình làm việc, hãy phân biệt hai nơi: lịch sử của mẫu lưu các thay đổi đã lưu, còn **Renders** lưu các lần tạo PDF và kết quả của chúng. Nhờ vậy, bạn có thể tìm lại đúng bản thiết kế hoặc file PDF mình cần.

<figure class="doc-sim data-assets-illustration tour-illustration" aria-label="Save → Publish → Run · Renders lưu kết quả">
<div class="sim-stage"><div class="sim-panel"><div class="ds-head"><strong>My template <span class="sim-badge">v1</span></strong><div class="tour-actions"><span class="sim-control">Save</span><span class="sim-control sim-dark">Publish</span></div></div><div class="ds-head"><strong>RUN</strong><span class="sim-control sim-focus">ϟ Run</span></div><div class="ds-run-fields"><div><small>VERSION</small><span class="sim-input">v1</span></div><div><small>VARIANT</small><span class="sim-input">Standard</span></div></div><div class="ds-code"><code>{ "recipient": "Tembuilder" }</code></div><div class="ds-rows"><div><span>Renders</span><small>PDF · Completed ↗</small></div></div></div></div>
<figcaption>Save → Publish → Run · Renders lưu kết quả</figcaption>
</figure>