diff --git a/examples/index.html b/examples/index.html
index 4a452e3..dc6ae62 100644
--- a/examples/index.html
+++ b/examples/index.html
@@ -22,15 +22,12 @@
 	<script type="text/javascript" src="../bundles/skinview3d.bundle.js"></script>
 
 	<script>
-		let skinViewer = new skinview3d.SkinViewer(document.getElementById("skin_container"));
-		skinViewer.width = 400;
-		skinViewer.height = 300;
-
-		skinViewer.loadSkinFrom("./1_8_texturemap_redux.png");
-
-		// By default, the skin model is automatically detected. You can turn it off in this way:
-		// skinViewer.detectModel = false;
-		// skinViewer.playerObject.skin.slim = true;
+		let skinViewer = new skinview3d.SkinViewer({
+			domElement: document.getElementById("skin_container"),
+			width: 400,
+			height: 300,
+			skin: "./1_8_texturemap_redux.png"
+		});
 
 		let control = new skinview3d.createOrbitControls(skinViewer);
 		skinViewer.animations.add(skinview3d.WalkingAnimation);
diff --git a/package-lock.json b/package-lock.json
index c8cce8d..b55dee3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2637,9 +2637,9 @@
 			"dev": true
 		},
 		"skinview-utils": {
-			"version": "0.3.0",
-			"resolved": "https://registry.npmjs.org/skinview-utils/-/skinview-utils-0.3.0.tgz",
-			"integrity": "sha512-QolLWQoRGhqJUFN0sN/IAWQH+XhqPyd+10VdiZQZhrTqZGPNyR5Hh8RspGGzdSqThYJhm2L15+kty5DT3tGYjg=="
+			"version": "0.5.1",
+			"resolved": "https://registry.npmjs.org/skinview-utils/-/skinview-utils-0.5.1.tgz",
+			"integrity": "sha512-6HUspYq2s1cWm7ZiiyfYanGEJ8rUAHC/qChBqFD2m5WGQ4Oy2FkInSFB8u1sB0oM49cmEFye09LUwdL6ev/72Q=="
 		},
 		"slice-ansi": {
 			"version": "2.1.0",
diff --git a/package.json b/package.json
index e1a4f51..249280c 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,7 @@
 		"build": "npm run build:modules && npm run build:bundles",
 		"test:lint": "eslint --ext .ts src",
 		"test": "npm run test:lint",
-		"dev:watch:modules": "tsc -w -p .",
+		"dev:watch:modules": "tsc -w --declaration --sourceMap --outDir libs -p .",
 		"dev:watch:bundles": "rollup -w -c",
 		"dev:serve": "ws",
 		"dev": "npm-run-all --parallel dev:watch:modules dev:watch:bundles dev:serve",
@@ -38,7 +38,7 @@
 		"bundles"
 	],
 	"dependencies": {
-		"skinview-utils": "^0.3.0",
+		"skinview-utils": "^0.5.1",
 		"three": "^0.117.1"
 	},
 	"devDependencies": {
diff --git a/src/viewer.ts b/src/viewer.ts
index ecfdebf..e8d0a78 100644
--- a/src/viewer.ts
+++ b/src/viewer.ts
@@ -1,4 +1,4 @@
-import { applyMixins, CapeContainer, ModelType, SkinContainer } from "skinview-utils";
+import { applyMixins, CapeContainer, ModelType, SkinContainer, RemoteImage, TextureSource, isTextureSource } from "skinview-utils";
 import { NearestFilter, PerspectiveCamera, Scene, Texture, Vector2, WebGLRenderer } from "three";
 import { RootAnimation } from "./animation.js";
 import { PlayerObject } from "./model.js";
@@ -10,6 +10,14 @@ export type LoadOptions = {
 	makeVisible?: boolean;
 }
 
+export type SkinViewerOptions = {
+	domElement: Node;
+	width?: number;
+	height?: number;
+	skin?: RemoteImage | TextureSource;
+	cape?: RemoteImage | TextureSource;
+}
+
 function toMakeVisible(options?: LoadOptions): boolean {
 	if (options && options.makeVisible === false) {
 		return false;
@@ -18,6 +26,7 @@ function toMakeVisible(options?: LoadOptions): boolean {
 }
 
 class SkinViewer {
+	readonly domElement: Node;
 	readonly scene: Scene;
 	readonly camera: PerspectiveCamera;
 	readonly renderer: WebGLRenderer;
@@ -32,7 +41,16 @@ class SkinViewer {
 	private _disposed: boolean = false;
 	private _renderPaused: boolean = false;
 
-	constructor(readonly domElement: Node) {
+	constructor(domElement: Node);
+	constructor(options: SkinViewerOptions);
+
+	constructor(param: Node | SkinViewerOptions) {
+		if (param instanceof Node) {
+			this.domElement = param;
+		} else {
+			this.domElement = param.domElement;
+		}
+
 		// texture
 		this.skinCanvas = document.createElement("canvas");
 		this.skinTexture = new Texture(this.skinCanvas);
@@ -61,6 +79,29 @@ class SkinViewer {
 		this.scene.add(this.playerObject);
 
 		window.requestAnimationFrame(() => this.draw());
+
+		if (!(param instanceof Node)) {
+			if (param.skin !== undefined) {
+				if (isTextureSource(param.skin)) {
+					this.loadSkin(param.skin);
+				} else {
+					this.loadSkin(param.skin);
+				}
+			}
+			if (param.cape !== undefined) {
+				if (isTextureSource(param.cape)) {
+					this.loadCape(param.cape);
+				} else {
+					this.loadCape(param.cape);
+				}
+			}
+			if (param.width !== undefined) {
+				this.width = param.width;
+			}
+			if (param.height !== undefined) {
+				this.height = param.height;
+			}
+		}
 	}
 
 	protected skinLoaded(model: ModelType, options?: LoadOptions): void {
@@ -78,6 +119,14 @@ class SkinViewer {
 		}
 	}
 
+	protected resetSkin(): void {
+		this.playerObject.skin.visible = false;
+	}
+
+	protected resetCape(): void {
+		this.playerObject.cape.visible = false;
+	}
+
 	private draw(): void {
 		if (this.disposed || this._renderPaused) {
 			return;