<h3 dir="auto">First Check</h3>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I added a very descriptive title to this issue.</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I used the GitHub search to find a similar issue and didn't find it.</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I searched the FastAPI documentation, with the integrated search.</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I already searched in Google "How to X in FastAPI" and didn't find any information.</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I already read and followed all the tutorial in the docs and didn't find an answer.</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I already checked if it is not related to FastAPI but to <a href="https://github.com/samuelcolvin/pydantic">Pydantic</a>.</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I already checked if it is not related to FastAPI but to <a href="https://github.com/swagger-api/swagger-ui">Swagger UI</a>.</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I already checked if it is not related to FastAPI but to <a href="https://github.com/Redocly/redoc">ReDoc</a>.</li>
</ul>
<h3 dir="auto">Commit to Help</h3>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I commit to help with one of those options <g-emoji class="g-emoji" alias="point_up_2" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f446.png">👆</g-emoji></li>
</ul>
<h3 dir="auto">Example Code</h3>
<div class="highlight highlight-source-python notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="from fastapi import FastAPI
from pydantic import BaseModel

app = FastAPI()

class MyModel(BaseModel):
    my_int: int

@app.get(&quot;/test&quot;, response_model=MyModel)
async def test():
    model = MyModel(my_int=280456587464933376)
    return model"><pre class="notranslate"><span class="pl-k">from</span> <span class="pl-s1">fastapi</span> <span class="pl-k">import</span> <span class="pl-v">FastAPI</span>
<span class="pl-k">from</span> <span class="pl-s1">pydantic</span> <span class="pl-k">import</span> <span class="pl-v">BaseModel</span>

<span class="pl-s1">app</span> <span class="pl-c1">=</span> <span class="pl-v">FastAPI</span>()

<span class="pl-k">class</span> <span class="pl-v">MyModel</span>(<span class="pl-v">BaseModel</span>):
    <span class="pl-s1">my_int</span>: <span class="pl-s1">int</span>

<span class="pl-en">@<span class="pl-s1">app</span>.<span class="pl-en">get</span>(<span class="pl-s">"/test"</span>, <span class="pl-s1">response_model</span><span class="pl-c1">=</span><span class="pl-v">MyModel</span>)</span>
<span class="pl-k">async</span> <span class="pl-k">def</span> <span class="pl-en">test</span>():
    <span class="pl-s1">model</span> <span class="pl-c1">=</span> <span class="pl-v">MyModel</span>(<span class="pl-s1">my_int</span><span class="pl-c1">=</span><span class="pl-c1">280456587464933376</span>)
    <span class="pl-k">return</span> <span class="pl-s1">model</span></pre></div>
<h3 dir="auto">Description</h3>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/38250010/151349061-78936c5a-02dd-45e0-9b37-590c418a112a.png"><img src="https://user-images.githubusercontent.com/38250010/151349061-78936c5a-02dd-45e0-9b37-590c418a112a.png" alt="image" style="max-width: 100%;"></a></p>
<p dir="auto">It should return <code class="notranslate">280456587464933376</code>, but it returns <code class="notranslate">280456587464933380</code>. In my testing, the difference was always <code class="notranslate">+ 4</code>.<br>
If I use a small number (for example, <code class="notranslate">2804</code>) it works as intended. If I convert the integer to a string it also works as intended.</p>
<p dir="auto">This is also reproducible if just the integer is returned with:</p>
<div class="highlight highlight-source-python notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="@app.get(&quot;/test&quot;)
async def test():
    return 280456587464933376"><pre class="notranslate"><span class="pl-en">@<span class="pl-s1">app</span>.<span class="pl-en">get</span>(<span class="pl-s">"/test"</span>)</span>
<span class="pl-k">async</span> <span class="pl-k">def</span> <span class="pl-en">test</span>():
    <span class="pl-k">return</span> <span class="pl-c1">280456587464933376</span></pre></div>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/38250010/151350378-fe52aa16-3d7a-4efc-8a8a-8df076469839.png"><img src="https://user-images.githubusercontent.com/38250010/151350378-fe52aa16-3d7a-4efc-8a8a-8df076469839.png" alt="image" style="max-width: 100%;"></a></p>
<h3 dir="auto">Operating System</h3>
<p dir="auto">Windows</p>
<h3 dir="auto">Operating System Details</h3>
<p dir="auto">Win10</p>
<h3 dir="auto">FastAPI Version</h3>
<p dir="auto">0.73.0 (latest)</p>
<h3 dir="auto">Python Version</h3>
<p dir="auto">3.10.1</p>
<h3 dir="auto">Additional Context</h3>
<p dir="auto"><em>No response</em></p>
<h3 dir="auto">Describe the bug</h3>
<p dir="auto">The interactive API docs interface misinterprets big integers.</p>
<h3 dir="auto">To Reproduce</h3>
<p dir="auto">Here I use the example from the <a href="https://fastapi.tiangolo.com/" rel="nofollow">FastAPI homepage</a>.</p>
<ol dir="auto">
<li>Create a file with:</li>
</ol>
<div class="highlight highlight-source-python notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="from fastapi import FastAPI

app = FastAPI()


@app.get(&quot;/items/{item_id}&quot;)
async def read_item(item_id: int, q: str = None):
    return {&quot;item_id&quot;: item_id, &quot;q&quot;: q}"><pre class="notranslate"><span class="pl-k">from</span> <span class="pl-s1">fastapi</span> <span class="pl-k">import</span> <span class="pl-v">FastAPI</span>

<span class="pl-s1">app</span> <span class="pl-c1">=</span> <span class="pl-v">FastAPI</span>()


<span class="pl-en">@<span class="pl-s1">app</span>.<span class="pl-en">get</span>(<span class="pl-s">"/items/{item_id}"</span>)</span>
<span class="pl-k">async</span> <span class="pl-k">def</span> <span class="pl-en">read_item</span>(<span class="pl-s1">item_id</span>: <span class="pl-s1">int</span>, <span class="pl-s1">q</span>: <span class="pl-s1">str</span> <span class="pl-c1">=</span> <span class="pl-c1">None</span>):
    <span class="pl-k">return</span> {<span class="pl-s">"item_id"</span>: <span class="pl-s1">item_id</span>, <span class="pl-s">"q"</span>: <span class="pl-s1">q</span>}</pre></div>
<ol start="2" dir="auto">
<li>Open the browser and call the endpoint <code class="notranslate">/docs</code>.</li>
<li>In the interactive API docs interface, click the <code class="notranslate">/items/{item_id}</code> item, and click the <em>Try it out</em> button.</li>
<li>Fill the <code class="notranslate">item_id</code> field with a big integer, e.g. <code class="notranslate">10001000100010001</code>, and click the <em>Execute</em> button.</li>
<li>In the <em>Server response</em> section, it shows a JSON response body with <code class="notranslate">{"item_id": 10001000100010000, "q": null}</code>.</li>
<li>But I expected it to return <code class="notranslate">{"item_id": 10001000100010001, "q": null}</code>.</li>
<li>If the endpoint <code class="notranslate">/items/10001000100010001</code> is called in the browser, it returns the expected JSON response.</li>
<li>If the command <code class="notranslate">curl -X GET "http://127.0.0.1:8000/items/10001000100010001" -H "accept: application/json"</code> is called in the shell, it returns the expected JSON response.</li>
</ol>
<h3 dir="auto">Expected behavior</h3>
<p dir="auto">The interactive API docs interface should return the same response that returns from the actual endpoint for big integers.</p>
<h3 dir="auto">Screenshots</h3>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/2186845/83713367-76493c80-a65a-11ea-8727-bfe21cb91e74.png"><img src="https://user-images.githubusercontent.com/2186845/83713367-76493c80-a65a-11ea-8727-bfe21cb91e74.png" alt="fastapi" style="max-width: 100%;"></a></p>
<h3 dir="auto">Environment</h3>
<ul dir="auto">
<li>OS: macOS 10.15.4</li>
<li>FastAPI Version: 0.55.1</li>
<li>Python version: 3.8.2</li>
<li>Browser: Google Chrome 83.0.4103.97</li>
</ul>