---
layout: default-layout
needAutoGenerateSidebar: true
needGenerateH3Content: true
noTitleIndex: true
title: Dynamsoft Document Viewer Getting Started - Creating HelloWorld
keywords: Documentation, Dynamsoft Document Viewer, Getting Started, Creating HelloWorld
breadcrumbText: Creating HelloWorld
description: Dynamsoft Document Viewer Documentation Getting Started, Creating HelloWorld
permalink: /gettingstarted/helloworld.html
---
# Creating HelloWorld
In this section, we’ll break down and show all the steps needed to build the HelloWorld.
### Mobile View Mockup
### Desktop View Mockup
We’ll build on this skeleton page:
```html
DDV - HelloWorld
```
## Adding the dependency
Add the dependency with the following code:
```html
```
You can refer to [Adding the dependency](https://www.dynamsoft.com/document-viewer/docs/gettingstarted/add_dependency.md).
## Define necessary HTML elements
For HelloWorld, we define below elements.
- Container to hold the viewer
```html
```
- Container's style
```html
```
## SDK initialization
```javascript
// Public trial license which is valid for 24 hours
// You can request a 30-day trial key from https://www.dynamsoft.com/customer/license/trialLicense/?product=ddv
Dynamsoft.DDV.Core.license = "DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9";
Dynamsoft.DDV.Core.engineResourcePath = "https://cdn.jsdelivr.net/npm/dynamsoft-document-viewer@latest/dist/engine";
// Wasm files are loaded on demand by default. Uncomment to preload all.
// Dynamsoft.DDV.Core.loadWasm();
// Load the annotation plugin.
Dynamsoft.DDV.use(Dynamsoft.DDV.AnnotationPlugin);
await Dynamsoft.DDV.Core.init();
```
## Create an edit viewer
```javascript
// Create an edit viewer
const editViewer = new Dynamsoft.DDV.EditViewer({
container: "container",
uiConfig: Dynamsoft.DDV.getDefaultUiConfig("editViewer"),
});
```
## Review the complete code
```html
DDV - HelloWorld
```