diff --git a/app/src/App.tsx b/app/src/App.tsx
index c0589b77..099476eb 100644
--- a/app/src/App.tsx
+++ b/app/src/App.tsx
@@ -84,7 +84,7 @@ function App() {
   // maintaining URL state
   useEffect(() => {
     const url = new URL(window.location.href);
-    if (file && file.source.getKey().startsWith("http")) {
+    if (file?.source.getKey().startsWith("http")) {
       url.searchParams.set("url", file.source.getKey());
       history.pushState(null, "", url.toString());
     } else {
diff --git a/app/src/Inspector.tsx b/app/src/Inspector.tsx
index bf0ebd4b..cfdeb393 100644
--- a/app/src/Inspector.tsx
+++ b/app/src/Inspector.tsx
@@ -58,7 +58,7 @@ const TileRow = (props: {
       <td>{props.entry.offset}</td>
       <td>{props.entry.length}</td>
       <td>
-        {props.entry.runLength == 0
+        {props.entry.runLength === 0
           ? "directory"
           : `tile(${props.entry.runLength})`}
       </td>
@@ -124,7 +124,7 @@ const FeatureSvg = (props: {
       onMouseOver={mouseOver}
       onMouseOut={mouseOut}
       onMouseDown={mouseDown}
-    ></path>
+    />
   );
 };
 
@@ -138,7 +138,7 @@ const LayerSvg = (props: {
       key={i}
       feature={f}
       setSelectedFeature={props.setSelectedFeature}
-    ></FeatureSvg>
+    />
   ));
   return <g color={props.color}>{elems}</g>;
 };
@@ -153,7 +153,7 @@ const StyledFeatureProperties = styled("div", {
 
 const FeatureProperties = (props: { feature: Feature }) => {
   const tmp: [string, string][] = [];
-  for (var key in props.feature.properties) {
+  for (const key in props.feature.properties) {
     tmp.push([key, props.feature.properties[key]]);
   }
 
@@ -186,7 +186,7 @@ const VectorPreview = (props: {
   const [ref, { width, height }] = useMeasure<HTMLDivElement>();
 
   useEffect(() => {
-    viewer.current!.zoomOnViewerCenter(0.1);
+    viewer.current?.zoomOnViewerCenter(0.1);
   }, []);
 
   useEffect(() => {
@@ -196,13 +196,13 @@ const VectorPreview = (props: {
 
       const tile = new VectorTile(new Protobuf(new Uint8Array(resp!.data)));
       const newLayers = [];
-      let max_extent = 0;
+      let maxExtent = 0;
       for (const [name, layer] of Object.entries(tile.layers)) {
-        if (layer.extent > max_extent) {
-          max_extent = layer.extent;
+        if (layer.extent > maxExtent) {
+          maxExtent = layer.extent;
         }
         const features: Feature[] = [];
-        for (var i = 0; i < layer.length; i++) {
+        for (let i = 0; i < layer.length; i++) {
           const feature = layer.feature(i);
           const p = path();
           const geom = feature.loadGeometry();
@@ -216,7 +216,7 @@ const VectorPreview = (props: {
           } else {
             for (const ring of geom) {
               p.moveTo(ring[0].x, ring[0].y);
-              for (var j = 1; j < ring.length; j++) {
+              for (let j = 1; j < ring.length; j++) {
                 p.lineTo(ring[j].x, ring[j].y);
               }
               if (feature.type === 3) {
@@ -234,7 +234,7 @@ const VectorPreview = (props: {
         }
         newLayers.push({ features: features, name: name });
       }
-      setMaxExtent(max_extent);
+      setMaxExtent(maxExtent);
       newLayers.sort(smartCompare);
       setLayers(newLayers);
     };
@@ -250,7 +250,7 @@ const VectorPreview = (props: {
       layer={l}
       color={schemeSet3[i % 12]}
       setSelectedFeature={setSelectedFeature}
-    ></LayerSvg>
+    />
   ));
 
   return (
@@ -280,7 +280,7 @@ const RasterPreview = (props: { file: PMTiles; entry: Entry }) => {
       const [z, x, y] = tileIdToZxy(entry.tileId);
       const resp = await props.file.getZxy(z, x, y);
       const blob = new Blob([resp!.data]);
-      var imageUrl = window.URL.createObjectURL(blob);
+      const imageUrl = window.URL.createObjectURL(blob);
       setImageSrc(imageUrl);
     };
 
@@ -289,7 +289,7 @@ const RasterPreview = (props: { file: PMTiles; entry: Entry }) => {
     }
   }, [props.entry]);
 
-  return <img src={imgSrc}></img>;
+  return <img src={imgSrc} alt="raster tile" />;
 };
 
 function getHashString(entry: Entry) {
@@ -357,10 +357,10 @@ function Inspector(props: { file: PMTiles }) {
   }, [props.file, selectedEntry]);
 
   const rows = entryRows.map((e, i) => (
-    <TileRow key={i} entry={e} setSelectedEntry={setSelectedEntry}></TileRow>
+    <TileRow key={i} entry={e} setSelectedEntry={setSelectedEntry} />
   ));
 
-  let tilePreview = <div></div>;
+  let tilePreview = <div />;
   if (selectedEntry && header?.tileType) {
     if (selectedEntry.runLength === 0) {
       // do nothing
diff --git a/app/src/Loader.tsx b/app/src/Loader.tsx
index 264bbedc..9cb3b9f7 100644
--- a/app/src/Loader.tsx
+++ b/app/src/Loader.tsx
@@ -28,7 +28,7 @@ const itemStyles = {
   fontSize: "$2",
   alignItems: "center",
   "&:hover": { backgroundColor: "$hover", color: "$white" },
-  "&:focus": { position: "relative", boxShadow: `0 0 0 2px blue` },
+  "&:focus": { position: "relative", boxShadow: "0 0 0 2px blue" },
 };
 
 const StyledLink = styled(
@@ -73,7 +73,7 @@ const ToolbarToggleItem = StyledToggleItem;
 function Loader(props: { file: PMTiles; mapHashPassed: boolean }) {
   const [tab, setTab] = useState("maplibre");
 
-  let view;
+  let view: any;
   if (tab === "maplibre") {
     view = (
       <MaplibreMap file={props.file} mapHashPassed={props.mapHashPassed} />
diff --git a/app/src/MaplibreMap.tsx b/app/src/MaplibreMap.tsx
index c1c44103..58c6e566 100644
--- a/app/src/MaplibreMap.tsx
+++ b/app/src/MaplibreMap.tsx
@@ -102,7 +102,7 @@ interface LayerVisibility {
   visible: boolean;
 }
 
-interface PmTilesMetadata {
+interface Metadata {
   name?: string;
   type?: string;
   tilestats?: unknown;
@@ -188,7 +188,7 @@ const LayersVisibilityController = (props: {
 
 const rasterStyle = async (file: PMTiles): Promise<StyleSpecification> => {
   const header = await file.getHeader();
-  const metadata = (await file.getMetadata()) as PmTilesMetadata;
+  const metadata = (await file.getMetadata()) as Metadata;
   let layers: LayerSpecification[] = [];
 
   if (metadata.type !== "baselayer") {
@@ -206,7 +206,7 @@ const rasterStyle = async (file: PMTiles): Promise<StyleSpecification> => {
     sources: {
       source: {
         type: "raster",
-        tiles: ["pmtiles://" + file.source.getKey() + "/{z}/{x}/{y}"],
+        tiles: [`pmtiles://${file.source.getKey()}/{z}/{x}/{y}`],
         minzoom: header.minZoom,
         maxzoom: header.maxZoom,
       },
@@ -229,7 +229,7 @@ const vectorStyle = async (
   layersVisibility: LayerVisibility[];
 }> => {
   const header = await file.getHeader();
-  const metadata = (await file.getMetadata()) as PmTilesMetadata;
+  const metadata = (await file.getMetadata()) as Metadata;
   let layers: LayerSpecification[] = [];
   let baseOpacity = 0.35;
 
@@ -238,15 +238,13 @@ const vectorStyle = async (
     baseOpacity = 0.9;
   }
 
-  var tilestats: any;
-  var vectorLayers: LayerSpecification[];
-  tilestats = metadata.tilestats;
-  vectorLayers = metadata.vector_layers;
+  const tilestats = metadata.tilestats;
+  const vectorLayers = metadata.vector_layers;
 
   if (vectorLayers) {
     for (const [i, layer] of vectorLayers.entries()) {
       layers.push({
-        id: layer.id + "_fill",
+        id: `${layer.id}_fill`,
         type: "fill",
         source: "source",
         "source-layer": layer.id,
@@ -268,7 +266,7 @@ const vectorStyle = async (
         filter: ["==", ["geometry-type"], "Polygon"],
       });
       layers.push({
-        id: layer.id + "_stroke",
+        id: `${layer.id}_stroke`,
         type: "line",
         source: "source",
         "source-layer": layer.id,
@@ -284,7 +282,7 @@ const vectorStyle = async (
         filter: ["==", ["geometry-type"], "LineString"],
       });
       layers.push({
-        id: layer.id + "_point",
+        id: `${layer.id}_point`,
         type: "circle",
         source: "source",
         "source-layer": layer.id,
@@ -315,7 +313,7 @@ const vectorStyle = async (
       sources: {
         source: {
           type: "vector",
-          tiles: ["pmtiles://" + file.source.getKey() + "/{z}/{x}/{y}"],
+          tiles: [`pmtiles://${file.source.getKey()}/{z}/{x}/{y}`],
           minzoom: header.minZoom,
           maxzoom: header.maxZoom,
           bounds: bounds,
@@ -425,7 +423,7 @@ function MaplibreMap(props: { file: PMTiles; mapHashPassed: boolean }) {
 
       const { x, y } = e.point;
       const r = 2; // radius around the point
-      var features = map.queryRenderedFeatures([
+      let features = map.queryRenderedFeatures([
         [x - r, y - r],
         [x + r, y + r],
       ]);
@@ -475,7 +473,7 @@ function MaplibreMap(props: { file: PMTiles; mapHashPassed: boolean }) {
         if (
           header.tileType === TileType.Png ||
           header.tileType === TileType.Webp ||
-          header.tileType == TileType.Jpeg
+          header.tileType === TileType.Jpeg
         ) {
           const style = await rasterStyle(props.file);
           map.setStyle(style);
@@ -492,7 +490,7 @@ function MaplibreMap(props: { file: PMTiles; mapHashPassed: boolean }) {
 
   return (
     <MapContainer ref={mapContainerRef}>
-      <div ref={mapContainerRef}></div>
+      <div ref={mapContainerRef} />
       <Hamburger onClick={toggleHamburger}>menu</Hamburger>
       {hamburgerOpen ? (
         <Options>
diff --git a/app/src/Metadata.tsx b/app/src/Metadata.tsx
index be065a44..6eec3e68 100644
--- a/app/src/Metadata.tsx
+++ b/app/src/Metadata.tsx
@@ -13,7 +13,7 @@ const Heading = styled("div", {
 });
 
 function Metadata(props: { file: PMTiles }) {
-  const [metadata, setMetadata] = useState<any>();
+  const [metadata, setMetadata] = useState<unknown>();
   const [header, setHeader] = useState<Header | null>(null);
 
   useEffect(() => {
diff --git a/app/src/Start.tsx b/app/src/Start.tsx
index 79540131..d19e700c 100644
--- a/app/src/Start.tsx
+++ b/app/src/Start.tsx
@@ -12,7 +12,7 @@ const Input = styled("input", {
   justifyContent: "center",
   fontSize: "$3",
   fontFamily: "$sans",
-  "&:focus": { boxShadow: `0 0 0 1px black` },
+  "&:focus": { boxShadow: "0 0 0 1px black" },
   width: "100%",
   border: "1px solid $white",
   padding: "$1",
@@ -141,7 +141,7 @@ function Start(props: {
         id="remoteUrl"
         placeholder="https://example.com/my_archive.pmtiles"
         onChange={onRemoteUrlChangeHandler}
-      ></Input>
+      />
       <Button color="gray" onClick={onSubmit} disabled={!remoteUrl.trim()}>
         Load URL
       </Button>
diff --git a/app/src/main.tsx b/app/src/main.tsx
index ee827bfb..920fd77b 100644
--- a/app/src/main.tsx
+++ b/app/src/main.tsx
@@ -2,8 +2,11 @@ import React from "react";
 import reactDom from "react-dom/client";
 import App from "./App";
 
-reactDom.createRoot(document.getElementById("root")!).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
-);
+const root = document.getElementById("root");
+if (root) {
+  reactDom.createRoot(root).render(
+    <React.StrictMode>
+      <App />
+    </React.StrictMode>
+  );
+}