diff --git a/docs/Jasmine.html b/docs/Jasmine.html
index 57ad56faa0..43f4b70309 100755
--- a/docs/Jasmine.html
+++ b/docs/Jasmine.html
@@ -274,7 +274,7 @@ <h2 id="jasmine_node_test">jasmine_node_test</h2>
                             A label providing the <code>@bazel/jasmine</code> npm dependency.
                     </td>
         <td>
-            "//packages/jasmine"
+            "@npm//@bazel/jasmine"
         </td>
       </tr>
             <tr id="jasmine_node_test-jasmine_entry_point">
@@ -283,7 +283,7 @@ <h2 id="jasmine_node_test">jasmine_node_test</h2>
                             A label providing the <code>@bazel/jasmine</code> entry point.
                     </td>
         <td>
-            "//packages/jasmine:jasmine_runner.js"
+            "@npm//@bazel/jasmine:jasmine_runner.js"
         </td>
       </tr>
             <tr id="jasmine_node_test-kwargs">
diff --git a/docs/Jasmine.md b/docs/Jasmine.md
index 553ce7ad06..d7e9259171 100755
--- a/docs/Jasmine.md
+++ b/docs/Jasmine.md
@@ -123,7 +123,7 @@ jasmine_node_test(<a href="#jasmine_node_test-name">name</a>, <a href="#jasmine_
                             A label providing the <code>@bazel/jasmine</code> npm dependency.
                     </td>
         <td>
-            "//packages/jasmine"
+            "@npm//@bazel/jasmine"
         </td>
       </tr>
             <tr id="jasmine_node_test-jasmine_entry_point">
@@ -132,7 +132,7 @@ jasmine_node_test(<a href="#jasmine_node_test-name">name</a>, <a href="#jasmine_
                             A label providing the <code>@bazel/jasmine</code> entry point.
                     </td>
         <td>
-            "//packages/jasmine:jasmine_runner.js"
+            "@npm//@bazel/jasmine:jasmine_runner.js"
         </td>
       </tr>
             <tr id="jasmine_node_test-kwargs">
diff --git a/docs/Protractor.html b/docs/Protractor.html
index 8fdb505fdf..45a57278c7 100755
--- a/docs/Protractor.html
+++ b/docs/Protractor.html
@@ -272,7 +272,7 @@ <h2 id="protractor_web_test">protractor_web_test</h2>
                             List of peer npm deps required by protractor_web_test
                     </td>
         <td>
-            ["@build_bazel_rules_nodejs//packages/protractor", "@npm//protractor"]
+            ["@npm//@bazel/protractor", "@npm//protractor"]
         </td>
       </tr>
             <tr id="protractor_web_test-protractor_entry_point">
diff --git a/docs/Protractor.md b/docs/Protractor.md
index 2eca7aac8d..dbd61e808b 100755
--- a/docs/Protractor.md
+++ b/docs/Protractor.md
@@ -121,7 +121,7 @@ protractor_web_test(<a href="#protractor_web_test-name">name</a>, <a href="#prot
                             List of peer npm deps required by protractor_web_test
                     </td>
         <td>
-            ["@build_bazel_rules_nodejs//packages/protractor", "@npm//protractor"]
+            ["@npm//@bazel/protractor", "@npm//protractor"]
         </td>
       </tr>
             <tr id="protractor_web_test-protractor_entry_point">
diff --git a/docs/Rollup.html b/docs/Rollup.html
index 5d2eeac1b5..60a0386905 100755
--- a/docs/Rollup.html
+++ b/docs/Rollup.html
@@ -295,7 +295,7 @@ <h2 id="rollup_bundle">rollup_bundle</h2>
         <td><a href="https://bazel.build/docs/build-ref.html#labels">Label</a></td>
         <td>optional</td>
         <td>
-            //packages/rollup:rollup.config.js
+            @npm//@bazel/rollup:rollup.config.js
         </td>
       </tr>
             <tr id="rollup_bundle-deps">
@@ -445,7 +445,7 @@ <h2 id="rollup_bundle">rollup_bundle</h2>
         <td><a href="https://bazel.build/docs/build-ref.html#labels">Label</a></td>
         <td>optional</td>
         <td>
-            //packages/rollup/bin:rollup-worker
+            @npm//@bazel/bin:rollup-worker
         </td>
       </tr>
             <tr id="rollup_bundle-silent">
diff --git a/docs/Rollup.md b/docs/Rollup.md
index 0a341f72f6..3cf0df6db1 100755
--- a/docs/Rollup.md
+++ b/docs/Rollup.md
@@ -153,7 +153,7 @@ If not set, a default basic Rollup config is used.
         <td><a href="https://bazel.build/docs/build-ref.html#labels">Label</a></td>
         <td>optional</td>
         <td>
-            //packages/rollup:rollup.config.js
+            @npm//@bazel/rollup:rollup.config.js
         </td>
       </tr>
             <tr id="rollup_bundle-deps">
@@ -303,7 +303,7 @@ Otherwise, the outputs are assumed to be a single file.
         <td><a href="https://bazel.build/docs/build-ref.html#labels">Label</a></td>
         <td>optional</td>
         <td>
-            //packages/rollup/bin:rollup-worker
+            @npm//@bazel/bin:rollup-worker
         </td>
       </tr>
             <tr id="rollup_bundle-silent">
diff --git a/docs/Terser.html b/docs/Terser.html
index 21010f327d..f36489f087 100755
--- a/docs/Terser.html
+++ b/docs/Terser.html
@@ -281,7 +281,7 @@ <h2 id="terser_minified">terser_minified</h2>
         <td><a href="https://bazel.build/docs/build-ref.html#labels">Label</a></td>
         <td>optional</td>
         <td>
-            //packages/terser:terser_config.default.json
+            @npm//@bazel/terser:terser_config.default.json
         </td>
       </tr>
             <tr id="terser_minified-debug">
@@ -334,7 +334,7 @@ <h2 id="terser_minified">terser_minified</h2>
         <td><a href="https://bazel.build/docs/build-ref.html#labels">Label</a></td>
         <td>optional</td>
         <td>
-            //packages/terser/bin:terser
+            @npm//@bazel/bin:terser
         </td>
       </tr>
         </tbody>
diff --git a/docs/Terser.md b/docs/Terser.md
index f8c4a5f20f..808421a07b 100755
--- a/docs/Terser.md
+++ b/docs/Terser.md
@@ -135,7 +135,7 @@ If <code>config_file</code> isn't supplied, Bazel will use a default config file
         <td><a href="https://bazel.build/docs/build-ref.html#labels">Label</a></td>
         <td>optional</td>
         <td>
-            //packages/terser:terser_config.default.json
+            @npm//@bazel/terser:terser_config.default.json
         </td>
       </tr>
             <tr id="terser_minified-debug">
@@ -188,7 +188,7 @@ If you want to do this, you can pass a filegroup here.
         <td><a href="https://bazel.build/docs/build-ref.html#labels">Label</a></td>
         <td>optional</td>
         <td>
-            //packages/terser/bin:terser
+            @npm//@bazel/bin:terser
         </td>
       </tr>
         </tbody>
diff --git a/docs/TypeScript.html b/docs/TypeScript.html
index bb251d3a3b..9a2f467ecc 100755
--- a/docs/TypeScript.html
+++ b/docs/TypeScript.html
@@ -311,7 +311,7 @@ <h3 id="compiling-typescript-ts_library">Compiling TypeScript: <code>ts_library<
 <p>Create a <code>BUILD</code> file next to your sources:</p>
 
 <figure class="highlight"><pre><code class="language-python" data-lang="python"><span class="n">package</span><span class="p">(</span><span class="n">default_visibility</span><span class="o">=</span><span class="p">[</span><span class="s">"//visibility:public"</span><span class="p">])</span>
-<span class="n">load</span><span class="p">(</span><span class="s">"//packages/typescript:index.bzl"</span><span class="p">,</span> <span class="s">"ts_library"</span><span class="p">)</span>
+<span class="n">load</span><span class="p">(</span><span class="s">"@npm//@bazel/typescript:index.bzl"</span><span class="p">,</span> <span class="s">"ts_library"</span><span class="p">)</span>
 
 <span class="n">ts_library</span><span class="p">(</span>
     <span class="n">name</span> <span class="o">=</span> <span class="s">"my_code"</span><span class="p">,</span>
@@ -420,7 +420,7 @@ <h2 id="serving-typescript-for-development">Serving TypeScript for development</
 <p>To use <code>ts_devserver</code>, you simply <code>load</code> the rule, and call it with <code>deps</code> that
 point to your <code>ts_library</code> target(s):</p>
 
-<figure class="highlight"><pre><code class="language-python" data-lang="python"><span class="n">load</span><span class="p">(</span><span class="s">"//packages/typescript:index.bzl"</span><span class="p">,</span> <span class="s">"ts_devserver"</span><span class="p">,</span> <span class="s">"ts_library"</span><span class="p">)</span>
+<figure class="highlight"><pre><code class="language-python" data-lang="python"><span class="n">load</span><span class="p">(</span><span class="s">"@npm//@bazel/typescript:index.bzl"</span><span class="p">,</span> <span class="s">"ts_devserver"</span><span class="p">,</span> <span class="s">"ts_library"</span><span class="p">)</span>
 
 <span class="n">ts_library</span><span class="p">(</span>
     <span class="n">name</span> <span class="o">=</span> <span class="s">"app"</span><span class="p">,</span>
@@ -633,7 +633,7 @@ <h2 id="ts_devserver">ts_devserver</h2>
         <td><a href="https://bazel.build/docs/build-ref.html#labels">Label</a></td>
         <td>optional</td>
         <td>
-            //packages/typescript/devserver:devserver
+            @npm//@bazel/devserver:devserver
         </td>
       </tr>
             <tr id="ts_devserver-devserver_host">
@@ -645,7 +645,7 @@ <h2 id="ts_devserver">ts_devserver</h2>
         <td><a href="https://bazel.build/docs/build-ref.html#labels">Label</a></td>
         <td>optional</td>
         <td>
-            //packages/typescript/devserver:devserver_darwin_amd64
+            @npm//@bazel/devserver:devserver_darwin_amd64
         </td>
       </tr>
             <tr id="ts_devserver-entry_module">
diff --git a/docs/TypeScript.md b/docs/TypeScript.md
index 821d3073fe..fde6651fee 100755
--- a/docs/TypeScript.md
+++ b/docs/TypeScript.md
@@ -174,7 +174,7 @@ Create a <code>BUILD</code> file next to your sources:
 
 {% highlight python %}
 package(default_visibility=["//visibility:public"])
-load("//packages/typescript:index.bzl", "ts_library")
+load("@npm//@bazel/typescript:index.bzl", "ts_library")
 
 ts_library(
     name = "my_code",
@@ -289,7 +289,7 @@ To use <code>ts_devserver</code>, you simply <code>load</code> the rule, and cal
 point to your <code>ts_library</code> target(s):
 
 {% highlight python %}
-load("//packages/typescript:index.bzl", "ts_devserver", "ts_library")
+load("@npm//@bazel/typescript:index.bzl", "ts_devserver", "ts_library")
 
 ts_library(
     name = "app",
@@ -521,7 +521,7 @@ ts_devserver(<a href="#ts_devserver-name">name</a>, <a href="#ts_devserver-addit
         <td><a href="https://bazel.build/docs/build-ref.html#labels">Label</a></td>
         <td>optional</td>
         <td>
-            //packages/typescript/devserver:devserver
+            @npm//@bazel/devserver:devserver
         </td>
       </tr>
             <tr id="ts_devserver-devserver_host">
@@ -533,7 +533,7 @@ ts_devserver(<a href="#ts_devserver-name">name</a>, <a href="#ts_devserver-addit
         <td><a href="https://bazel.build/docs/build-ref.html#labels">Label</a></td>
         <td>optional</td>
         <td>
-            //packages/typescript/devserver:devserver_darwin_amd64
+            @npm//@bazel/devserver:devserver_darwin_amd64
         </td>
       </tr>
             <tr id="ts_devserver-entry_module">
diff --git a/tools/stardoc/post-process-docs.js b/tools/stardoc/post-process-docs.js
index a6bcaeebb4..c6433f6a24 100644
--- a/tools/stardoc/post-process-docs.js
+++ b/tools/stardoc/post-process-docs.js
@@ -11,6 +11,14 @@ const out = content
   .replace(/```(\w*?)\n((?:(?!```)[\s\S])+)```/g, (str, lang, block) => {
     // if no lang is defined, assume Python, it's likely right and the param is required
     return `{% highlight ${lang ? lang.trim() : 'python'} %}\n${block}{% endhighlight %}`;
+  })
+  // replace the //packages/foo from the docs with references to @npm//@bazel/foo
+  // @npm is not the required name, but it seems to be the common case
+  // this reflects the similar transformation made when publishing the packages to npm
+  // via pkg_npm defined in //tools:defaults.bzl
+  .replace(/(?:@.*)*?\/\/packages\/([^:"\s]*)/g, (str, pkg) => {
+    const parts = pkg.split('/');
+    return `@npm//@bazel/${parts[parts.length - 1]}`;
   });
 
 // stamp the frontmatter into the post processed stardoc HTML