{"id":20382665,"url":"https://github.com/autodesk-forge/library-javascript-viewer-extensions","last_synced_at":"2025-08-10T14:06:09.304Z","repository":{"id":149154908,"uuid":"76932152","full_name":"Autodesk-Forge/library-javascript-viewer-extensions","owner":"Autodesk-Forge","description":"A collection of various JavaScript extensions for the Forge viewer","archived":false,"fork":false,"pushed_at":"2018-09-17T02:17:39.000Z","size":4176,"stargazers_count":83,"open_issues_count":4,"forks_count":48,"subscribers_count":17,"default_branch":"master","last_synced_at":"2025-07-06T03:42:13.959Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Autodesk-Forge.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2016-12-20T07:04:18.000Z","updated_at":"2025-06-16T13:34:19.000Z","dependencies_parsed_at":null,"dependency_job_id":"17dd4536-54be-4cc2-a4e7-210d9df5890f","html_url":"https://github.com/Autodesk-Forge/library-javascript-viewer-extensions","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Autodesk-Forge/library-javascript-viewer-extensions","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Autodesk-Forge%2Flibrary-javascript-viewer-extensions","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Autodesk-Forge%2Flibrary-javascript-viewer-extensions/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Autodesk-Forge%2Flibrary-javascript-viewer-extensions/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Autodesk-Forge%2Flibrary-javascript-viewer-extensions/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Autodesk-Forge","download_url":"https://codeload.github.com/Autodesk-Forge/library-javascript-viewer-extensions/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Autodesk-Forge%2Flibrary-javascript-viewer-extensions/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":269734149,"owners_count":24466554,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-10T02:00:08.965Z","response_time":71,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-15T02:18:33.776Z","updated_at":"2025-08-10T14:06:09.281Z","avatar_url":"https://github.com/Autodesk-Forge.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# library-javascript-viewer-extensions\n\n## Deprecation Warning\n\nThis repo is no longer maintained, most of the extensions are still valid however use them at your own risk.\n\nFor a more up-to-date set of Forge Viewer extensions take a look there:\n\n[Viewer.Extensions.Dynamic](https://github.com/Autodesk-Forge/forge-rcdb.nodejs/tree/master/src/client/viewer.components/Viewer.Extensions.Dynamic) from the [Forge RCDB](https://forge-rcdb.autodesk.io/configurator) project.\n\n\n## Description\n\nA collection of various JavaScript extensions for the viewer, showing what is doable with the client-side JavaScript API.\n\n## Dependencies\n\nSome extensions are dependent on specific files which are placed in the same directory. Dependencies need to be loaded before loading the\nextension, using a simple script tag in your html or dynamically using require or equivalent.\nThe path of dependencies needs to be modified accordingly to your setup.\n\n## Setup\n\nThe extensions on this sample were written with ES6 sytanx, so it needs transpiling before it can be used.\n\nInstall [NodeJS](https://nodejs.org). \n\nClone this project or download it. It's recommended to install [GitHub desktop](https://desktop.github.com/). To clone it via command line, use the following (**Terminal** on MacOSX/Linux, **Git Shell** on Windows):\n\n    git clone https://github.com/Autodesk-Forge/library-javascript-viewer-extensions\n    \nNavigate to the folder and run **install** to download all the required dependencies:\n\n    npm install\n\nBy default, right after **install**, the build script should will run automatically, which will build the minified JavaScript files. If not (or to run in manually later), use the following:\n\n    npm run build-prod\n\nThis will create a folder */App/dynamic/extensions/* with one folder for each extension, inside will be a minified version, for instance **Viewing.Extension.Markup3D.min.js** (note the suffix .min.js).\n\nOnce build, the extension file can be copied to your project, regardless the backend programming language used. NodeJS is not required to run them. For instance, it's safe to copy to a ASP.NET project and use the **.min.js** extension file. Some extensions may require a backend implementation, see comments for each extension.\n\n## Usage Instructions\n\nThere are two ways to load an extension with viewer API:\n\n* Load extensions when viewer is initialized:\n\n\t\tvar viewerElement = document.getElementById('viewer');\n\n        viewer = new Autodesk.Viewing.Private.GuiViewer3D(viewerElement, {\n            extensions: ['BasicExtension']\n        });\n        \n\n        Autodesk.Viewing.Initializer(options, function () {\n            viewer.start();\n            loadDocument(viewer, options.document);\n        });\n\n* Load extensions dynamically on demand:\n\n\t\t//load extension for SEO\n\t\tviewer.loadExtension('Autodesk.ADN.Viewing.Extension.SEO');\n\nPlease refer to [this blog post](http://adndevblog.typepad.com/cloud_and_mobile/2014/10/how-to-write-custom-extensions-for-the-large-model-viewer.html) for detail.\n\nDepending on the extension, some additional parameters may be required to properly load it. In these cases, the **loadExtension** method is prefered. See comments below for each extension.\n\n## Description\n\nHere is a quick description of what each extension is doing:\n\n\n* **Autodesk.ADN.Viewing.Extension.Basic\n\nA basic Hello World extension that displays an alert dialog upon loading and unloading.\n\n* **Autodesk.ADN.Viewing.Extension.BasicES2015\n\nA Hello World extension but written using ES6/ES2015 syntax. Needs transpiling with a tool like Babel or Traceur before being used with the viewer.\n\n* **Autodesk.ADN.Viewing.Extension.BoundingBox\n\nDisplays a bounding box around the selected component.\n\n* **Autodesk.ADN.Viewing.Extension.Chart\n\nDisplays a PieChart and a dropdown menu listing all available model properties. When a pie is selected in the chart, isolates the specific components.\n\n* **Autodesk.ADN.Viewing.Extension.ContextMenu\n\nIllustrates how to customize the viewer context menu for zero-selection menu or item specific menu.\n\n* **Autodesk.ADN.Viewing.Extension.CustomTool\n\nA basic viewer tool that just dumps events in the console, useful for testing and debugging or using as a tool boilerplate.\n\n* **Autodesk.ADN.Viewing.Extension.DockingPanel\n\nA basic docking panel demo.\n\n* **Autodesk.ADN.Viewing.Extension.EventWatcher\n\nCreates a panel which lets user activates any event available in the API. Output event arguments to a section.\n\n* **Autodesk.ADN.Viewing.Extension.Explorer\n\nCreates a camera animation using a custom tool, rotating eye position around the model.\n\n* **Autodesk.ADN.Viewing.Extension.GeometrySelector\n\nIllustrates how to snap geometry: vertices, edges, faces and how to create selection commands to let user pick geometry on the model.\n\n* **Autodesk.ADN.Viewing.Extension.Hotkeys\n\nCreates hotkeys to switch viewer to fullscreen.\n\n* **Autodesk.ADN.Viewing.Extension.IFramePanel\n\nCreates a simple docking panel containing an iframe.\n\n* **Autodesk.ADN.Viewing.Extension.Layers\n\nIterates through layers. Valid only for 2D drawings.\n\n* **Autodesk.ADN.Viewing.Extension.Markup3D**\n\nAdd 3D markups on a 3D model. Uses StateManager extension to save \u0026 restore markups.\n\n* **Autodesk.ADN.Viewing.Extension.Material\n\nChanges material of selected component. Supports color and textures.\n\n* **Autodesk.ADN.Viewing.Extension.MeshData\n\nAccess mesh data of selected component, vertices and edges to represent them graphically.\n\n* **Autodesk.ADN.Viewing.Extension.MeshImporter\n\nImports custom json into the viewer and creates three.js meshes from it.\n\n* **Autodesk.ADN.Viewing.Extension.MetaProperties\n\nAdds some extra hardcoded properties to viewer property panel.\n\n* **Autodesk.ADN.Viewing.Extension.ModelStructure\n\nDumps model structure to browser console.\n\n* **Autodesk.ADN.Viewing.Extension.ModelStructurePanel\n\nCustom model structure panel behavior.\n\n* **Autodesk.ADN.Viewing.Extension.PropertyDump\n\nDumps properties for selected component in browser console.\n\n* **Autodesk.ADN.Viewing.Extension.PropertyListPanel\n\nCustom panel derived from property list panel\n\n* **Autodesk.ADN.Viewing.Extension.PropertyPanel\n\nInserts custom data into viewer property panel.\n\n* **Autodesk.ADN.Viewing.Extension.PropertyTranslator\n\nUses microsoft translation API to translate property panel values on the fly.\n\n* **Autodesk.ADN.Viewing.Extension.StateManager**\n\nSave and restore states of the viewer (position, markups, rotation, zoom, etc). This extension requires a backend implementation to store the states. To load it on viewer, use the **loadExtension** method with the following parameters: **apiUrl** that specifies the endpoints to call to save \u0026 restore states; and model._id that is passed to identify the model.\n\n    viewer.loadExtension('Viewing.Extension.StateManager', \n      {\n        apiUrl: 'http://localhost:3000/api/',\n        model: {_id: 'YourModelUrn'}\n      }\n    );\n\n* **Autodesk.ADN.Viewing.Extension.ScreenShotManager\n\nCreates a panel that lets you manage screenshots taken with the API.\n\n* **Autodesk.ADN.Viewing.Extension.Toolbar\n\nVarious toolbar controls customization example.\n\n* **Autodesk.ADN.Viewing.Extension.UIComponent\n\nIllustrates on to create a docking panel more advanced than the basic docking panel extension.\n\n* **Autodesk.ADN.Viewing.Extension.Workshop\n\nA demo extension which illustrates several concepts of the API. See the complete [tutorial](https://github.com/Developer-Autodesk/tutorial-getting.started-view.and.data) for more details.\n\n![thumbnail](/thumbnail.png)\n\n## License\n\nThis sample is licensed under the terms of the [MIT License](http://opensource.org/licenses/MIT). Please see the [LICENSE](LICENSE) file for full details.\n\n## Written by \n\nWritten by [Philippe Leefsma](https://forge.autodesk.com/author/philippe-leefsma) \n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fautodesk-forge%2Flibrary-javascript-viewer-extensions","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fautodesk-forge%2Flibrary-javascript-viewer-extensions","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fautodesk-forge%2Flibrary-javascript-viewer-extensions/lists"}