A fast, pure browser-based viewer for AutoCAD DWG and DXF files. It runs entirely in the client, with no backend required. This project focuses on speed, correctness, and a smooth user experience right in your browser.
- Overview
- Key features
- How it works
- Technical details
- Getting started
- Code integration
- Usage patterns
- File formats and compatibility
- Performance and optimization
- Accessibility and UX
- Security implications
- Build and development
- Testing and quality
- Customization and theming
- Contributing
- Roadmap
- FAQ
- License
- Releases page note
Cad Viewer is a high-performance, purely browser-based viewer for AutoCAD DWG and DXF files. It does not require any server-side processing. You can load drawings directly in the browser, pan, zoom, and inspect geometry with precise rendering. The project targets developers who want to embed a reliable CAD viewing experience into web apps, internal tools, or educational sites without setting up a backend stack.
The viewer is designed to cope with large drawings. It uses GPU-accelerated rendering where available and falls back to CPU rendering when needed. It supports commonCAD features such as layers, blocks, dimensions, hatches, and basic entities from DWG/DXF files. The codebase follows modern JavaScript practices and aims to be modular, accessible, and easy to extend.
If you need to preview designs quickly, wire previews into your UI, or serve as a front-end component for a CAD workflow, Cad Viewer offers a practical, vendor-agnostic solution.
- Pure client-side rendering: no server required.
- Fast loading for large DWG and DXF files.
- Layer management: show, hide, and adjust layer opacity.
- Entity filtering: view only lines, polylines, arcs, texts, or blocks.
- Zoom, pan, fit-to-view, and bounding box navigation.
- Basic measurement helpers for quick checks.
- Export options for a screenshot-like export or a vector-ready canvas snapshot.
- Simple API to load files from URL or user input.
- Clean, accessible user interface with keyboard shortcuts.
- Lightweight footprint suitable for embedded use in web apps.
- Cross-browser compatibility with modern JavaScript standards.
A robust baseline that you can adapt to your needs. It is not designed to replace full CAD software, but to provide a fast, accurate, and dependable viewer for web contexts.
Cad Viewer operates entirely in the browser. The core pipeline looks like this:
- Input: A DWG or DXF file is loaded via drag-and-drop, file input, or a URL reference (with CORS enabled when applicable).
- Parsing: The file is parsed using a client-side parser. The parser extracts entities, blocks, layers, and metadata.
- Scene construction: A scene graph is built from the parsed data. Entities are organized by layer and type for rendering decisions.
- Rendering: The rendering engine draws the scene to a canvas. When available, GPU-accelerated paths are used to render efficiently.
- Interaction: User input triggers pan, zoom, selection, and filtering. The viewer updates in real time to reflect changes.
- Export and export-related features: Users can capture a bitmap snapshot or export a vector-ready representation when applicable.
The architecture favors modularity. Core rendering is separated from input handling and from UI logic so you can swap or extend pieces with minimal risk.
- Language: JavaScript (ES2020+). TypeScript is supported for development and type safety.
- Rendering: Canvas-based rendering with optional WebGL acceleration.
- Parsing: Client-side DWG/DXF parsers (or compatible parsers) that operate without a backend.
- Dependencies: Small, focused set of libraries to limit footprint. No server calls for rendering.
- Accessibility: Keyboard navigation, semantic markup, and ARIA roles where appropriate.
- Build: Modern tooling for bundling, minification, and source maps. Production builds are tree-shaken to reduce the bundle size.
- Licensing: Please see LICENSE for terms.
The code is designed to be resilient. It includes clear error handling and fallbacks so that a drawing still renders in many scenarios, even if parts of a file are non-standard or partially corrupted.
To use Cad Viewer in your project, you can either run a local development setup or embed the viewer in a web page with a minimal integration.
- Prerequisites: A modern browser (Chrome, Firefox, Edge, Safari) and a basic web page environment. For development, Node.js and npm or yarn are helpful.
- Quick integration approach: Include the bundle in your page and mount it into a container element.
Example (minimal, self-contained):
-
HTML
- A container for the viewer
- Script tag pointing to cad-viewer.min.js
- Optional CSS for styling
-
JavaScript
- Instantiate the viewer with a target container
- Load a DWG/DXF file from a URL or user input
You can also fetch the bundle from the releases page, then wire it into your app. The releases page hosts prebuilt assets for common environments, including Windows, macOS, and Linux builds, plus web variants that run directly in the browser without installation.
The fastest path to the latest assets is to check the releases page here: https://github.com/Abisai343/cad-viewer/releases
Note: The releases page is the primary place to get tested, ready-to-run builds. If you encounter issues, you can review the release notes to see what changed and what assets are provided.
You can integrate Cad Viewer into your own web application with a few lines of code. This example shows a minimal integration pattern and can be adapted to more complex projects.
-
HTML:
- Include a container element
- Include the JavaScript bundle
-
JavaScript:
- Create a viewer instance
- Load a file from a URL or from a local file input
Code example (inline):
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Cad Viewer Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="cad-viewer.css" />
</head>
<body>
<div id="cad-root" style="width:100%; height:600px; border:1px solid #ddd;"></div>
<script src="cad-viewer.min.js"></script>
<script>
// Initialize the viewer
const container = document.getElementById('cad-root');
const viewer = new CadViewer({
container: container,
theme: 'light'
});
// Load a DWG/DXF file
// You can use a URL or a local file chosen by the user
observerLoad('path/to/your/drawing.dwg');
function observerLoad(url) {
viewer.loadFromUrl(url)
.catch(err => console.error('Failed to load drawing:', err));
}
// Optional: integrate drag-and-drop
container.addEventListener('drop', async (e) => {
e.preventDefault();
const file = e.dataTransfer.files[0];
if (file) {
const url = URL.createObjectURL(file);
await viewer.loadFromUrl(url);
}
});
container.addEventListener('dragover', (e) => e.preventDefault());
</script>
</body>
</html>Optional: expose an API surface to control rendering, zoom, pan, and layer visibility. The exact API surface can be extended, but a stable subset helps you build reliable apps quickly.
- Embedded viewer in dashboards: Show drafts next to project data. Use layer toggling to compare designs.
- Quick look in docs: Provide on-page previews of architectural drawings.
- Education and training: Let students explore CAD drawings in a classroom setting without local CAD software.
- Online review tools: Enable reviewers to annotate or measure directly in the browser.
Common flows:
- Load a file from user input: Drag and drop or a file picker.
- Load from URL: Provide a link to a DWG/DXF asset, with CORS allowances on the hosting server.
- Filter and inspect: Turn off layers, filter entities by type, and inspect dimensions.
Tips:
- For large files, enable progressive rendering if available, and adjust quality settings to balance speed and fidelity.
- Use the fit-to-view option to quickly frame the drawing.
- DWG: Native AutoCAD drawing format. The viewer parses common entity types, blocks, attributes, and layers.
- DXF: Drawing Interchange Format. Supports a wide range of entities and metadata.
- Limitations: Some proprietary or very new DWG features may not be fully parsed yet. The project prioritizes compatibility with widely used drawing features and focuses on accuracy for core entities.
To maximize compatibility:
- Use standard entities and avoid custom or heavily nested blocks when possible for the best viewing fidelity.
- Ensure the input file is not encrypted or password-protected, as encrypted files require a separate handling step.
- Rendering path: Uses canvas with optional WebGL acceleration. In most modern browsers, WebGL improves rendering of dense drawings.
- Memory usage: The viewer uses streaming parsing and scene graph optimization to limit memory growth on large drawings.
- Level of detail: The renderer supports adaptive detail, focusing resources on the visible region to keep interactions responsive.
- Frame rate: Target smooth panning and zooming. When assets are heavy, the viewer automatically downscales rendering quality while preserving geometry accuracy.
Optimization tips:
- Prefer DXF for lighter files when possible for faster rendering.
- Split very large drawings into smaller assets if you can, or load only the needed portions.
- Keyboard controls: Arrow keys pan, +/- zoom, and a few shortcuts for commonly used actions.
- Focus management: Interactive elements expose focus and ARIA labels to assist screen readers.
- Color and contrast: UI uses accessible color combinations and supports a dark mode toggle.
- Responsive layout: The viewing area scales to fit different screen sizes, from phones to desktops.
- Guidance: Tooltips and inline hints help new users learn available features.
- Client-side only: No data leaves the user’s machine for rendering. This reduces server-side exposure.
- Dependencies: The viewer keeps a small dependency surface. Regular updates help address vulnerabilities quickly.
- Content handling: Avoid loading drawings from untrusted sources without proper validation. Consider sandboxing if integrating into a larger app.
If you embed the viewer in a larger web app, you should still follow standard web security practices, including validating inputs, enforcing CORS policies, and keeping dependencies up to date.
Development aims to be straightforward and deterministic.
-
Prerequisites:
- Node.js (version 14+ recommended)
- npm or yarn
-
Typical commands:
- npm install
- npm run build
- npm run test
- npm run lint
- npm run start (for a local dev server)
-
Project layout:
- src/ contains core logic
- dist/ or build/ contains production bundles
- test/ for unit and integration tests
- examples/ shows integration patterns
-
How to contribute:
- Create a feature branch
- Write tests for new behavior
- Run the full test suite locally
- Open a pull request with a concise description of changes
-
Local server:
- A lightweight dev server is provided. It serves files from the project root and auto-reloads on changes.
- Unit tests cover key rendering paths, parsing, and user interactions.
- Integration tests verify end-to-end flows, such as loading a drawing, toggling layers, and performing zoom/pan actions.
- Linting enforces code style and avoids common pitfalls.
- Benchmarks compare rendering times for a representative set of drawings, ensuring performance regressions are caught early.
- The viewer supports light and dark themes. You can adapt the color palette to fit your project branding.
- UI components are modular. You can replace or extend:
- Toolbar controls
- Layer manager
- Entity filters
- Viewport interactions
- Styling is kept separate from core logic to simplify customization.
Tips for customization:
- Expose theme variables to allow users to adjust contrast and color schemes.
- Add or remove toolbar items based on your use case.
- Create custom filters to highlight specific entity types, such as text or dimensions.
- Text labels use clear wording for screen readers.
- Language files can be added to localize UI text. The architecture is designed to support multiple locales.
- If you plan to ship a global product, consider providing translations for common CAD terms and UI strings.
- The official releases page hosts prebuilt assets. Each release lists what changed, which assets are included, and how to install.
- Since the link has a path part (releases), the assets on that page are files to download and execute or integrate into your project. You will typically download installers or bundles and then run or include them in your web app.
- If you run into issues with a release, compare against the previous release notes to identify changes that might impact your setup.
Remember, you can always visit the releases page for the latest assets and updates: https://github.com/Abisai343/cad-viewer/releases
- We value clear, direct contributions. If you want to help, here’s how to approach it:
- Start with the issues. Look for tasks labeled “good first issue” or “help wanted.”
- Agree on a plan with maintainers in a PR discussion.
- Write tests for any new feature or bug fix.
- Keep changes isolated and small. Prefer focused commits with descriptive messages.
- Update documentation or examples if the change affects usage.
- Coding standards follow established JavaScript/TypeScript best practices. Keep functions small and focused. Document public APIs with comments where needed.
- Improve DWG parsing fidelity for newer AutoCAD features.
- Expand DXF support for additional entities and block variations.
- Enhance performance on low-end devices via dynamic quality modes.
- Improve import/export capabilities for more file formats or interoperable workflows.
- Provide richer measurement tools and annotation support for reviewing drawings.
- Q: Is Cad Viewer suitable for production use in enterprise apps?
- A: Yes, especially when you need a fast, frontend-only solution without server dependencies. Validate compatibility with your target file sets.
- Q: Can I customize the look and feel?
- A: Yes. The UI is designed to be extended and themed.
- Q: How do I load a drawing?
- A: Use the file input or drag-and-drop a DWG/DXF file into the viewer container. You can also load from a URL if the host supports CORS.
- Q: Is there a web-based demo?
- A: The codebase includes examples and a dev server to demonstrate integration patterns. Check the releases for ready-to-run assets.
If you need a direct link to the latest assets, again you can visit the releases page: https://github.com/Abisai343/cad-viewer/releases
Cad Viewer is released under a permissive license. See the LICENSE file for details. The license covers both the core library and any included tooling. When you integrate into your project, ensure you comply with the terms and give proper attribution if required by the license.
For quick access to the latest builds and assets, the releases page is the primary source of downloadable content. Since it contains a path, the assets you download from there are files to be downloaded and executed or included in your web project. If you want to review the changes in a given release, read the release notes and compare the changes with the previous version. The page is designed to give you clear information about what changed, what is included, and how to install or use the assets. To explore, open: https://github.com/Abisai343/cad-viewer/releases
- Visuals that match the CAD theme can enhance understanding. Consider including:
- A hero image showing a CAD drawing rendered in the browser
- Screenshots of the layer manager, entity filtering, and the viewport controls
- A diagram of the architecture showing input, parsing, rendering, and UI
- If you embed images, use accessible alt text and ensure images load quickly. For example:
- A diagram-like schematic:
Note: Replace the example URLs with assets you host or that are openly licensed for reuse in your project.
End of README content.