tweaks to the @as decorator syntax widget docs (#1011)

Author: zth

misc_docs/syntax/decorator_as.mdx

@@ -6,7 +6,10 @@ summary: "This is the `@as` decorator."
 category: "decorators"
 ---
 
-The `@as` decorator is commonly used on record types to alias record field names to a different JavaScript attribute name.
+The `@as` decorator has multiple uses in ReScript.
+
+## Change runtime name of record field
+The `@as` decorator can be used on record types to alias record field names to a different JavaScript attribute name.
 
 This is useful to map to JavaScript attribute names that cannot be expressed in ReScript (such as keywords).
 
@@ -52,8 +55,36 @@ var value = [
 
 </CodeTab>
 
+## Change the runtime representation of a variant constructor
+Similarily to changing the runtime name of a record field, you can change the runtime representation of a variant constructor using `@as()`. Only with variants, you have many more options for the runtime representation than for record field names:
+
+<CodeTab labels={["ReScript", "JS Output"]}>
+
+```res
+@unboxed
+type pet = | @as("dog") Dog | @as(1) Cat | @as(null) SomethingElse
+
+let dog = Dog
+let cat = Cat
+let somethingElse = SomethingElse
+
+```
+
+```js
+let dog = "dog";
+
+let cat = 1;
+
+let somethingElse = null;
+```
+
+</CodeTab>
+
+Read more about the [`@as` decorator and variants](variant.md#valid-as-payloads).
+
 ### References
 
 * [Bind Using ReScript Record](/docs/manual/latest/bind-to-js-object#bind-using-rescript-record)
 * [Constrain Arguments Better](/docs/manual/latest/bind-to-js-function#constrain-arguments-better)
 * [Fixed Arguments](/docs/manual/latest/bind-to-js-function#fixed-arguments)
+* [`@as` decorator and variants](variant.md#valid-as-payloads)